Best matchRelated: API requestsIntermediate
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionary →Currency Converter
Build a currency converter with HTML, CSS, and JavaScript while practicing API requests and input events.
Intermediate30–45 minutesHTML5CSS3JavaScript
You’ll practice
API RequestsInput EventsDOM Selection
01 — What you’ll build
Currency Converter
This project shows you how HTML, CSS, and JavaScript work together in a currency converter. You’ll convert a value and keep the result easy to understand, then practice API requests, input events, and DOM selection as you build the complete project from scratch.
02 — Included
- Live API-powered results
- Currency Converter interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Fetch data from an API
- Respond to input changes
- Select HTML elements from the DOM
- Update content on the page
- Read and update form values
- Format numbers with toFixed
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript variables and number operations.
Complete project files
Build It from the Source Code
This project connects the interface to live API results.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for live data.
Project structure
currency-converter/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Currency Converter</h1>
<div class="currency-container">
<select id="currency-first">
<option value="AUD">AUD</option>
<option value="CAD">CAD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
<option value="JPY">JPY</option>
<option value="USD" selected>USD</option>
</select>
<input type="number" id="worth-first" value="1" min="0">
</div>
<div class="currency-container">
<select id="currency-second">
<option value="AUD">AUD</option>
<option value="CAD">CAD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR" selected>INR</option>
<option value="JPY">JPY</option>
<option value="USD">USD</option>
</select>
<input type="number" id="worth-second" disabled>
</div>
<p class="exchange-rate" id="exchange-rate">1 USD = 138.5802 JPY</p>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice API requests, input values, and number formatting with these related projects.
Best match
Related: input valuesIntermediate
Weather App
Request current weather data and display the response clearly.
Build a weather app →
Related: number formatting
Weight Converter
Format numeric results before displaying them on the page.
Build a weight converter →Related: API requestsBest match
English Dictionary
Look up a word and turn the API response into a useful definition.
Build an english dictionaryRelated: input values
Weather App
Request current weather data and display the response clearly.
Build a weather appRelated: number formatting
Weight Converter
Format numeric results before displaying them on the page.
Build a weight converter