.png)
![‘Companion’ Ending Breakdown: Director Drew Hancock Tells All About the Film’s Showdown and Potential Sequel: ‘That’s the Future I Want for [Spoiler]’](https://variety.com/wp-content/uploads/2025/02/MCDCOMP_WB028.jpg?#)
Create a currency converter with HTML, CSS, and vanilla JavaScript
By the end of this tutorial, you’ll have learned how to build a responsive currency app that fetches real-time data with the Exchange Rate API in a user-friendly interface. Let’s get to it! Our currency converter demo To create your own currency converter, you’ll first need to register your own API key from exchangerate-api.com. I based this design loosely on the excellent Crypto exchange platform by Yev Ledenov on Dribbble. Currency converter code in HTML We'll begin with the HTML part of our app. The currency converter code in HTML will give our application a simple interface containing: An input field for the amount to be converted A drop-down to select the from Currency value A second drop-down to select the to currency value A convert button A <p> tag to show the converted amount A <p> tag to show any errors that might occur during the conversion process The currency converter HTML code will look like this: 1 <div class="container"> 2 3 <div class="currency-container"> 4 <h1>Currency converter</h1> 5 <div class="input-box"> 6 <label for="amount">Enter amount</label> 7 <input type="text" id="amount" placeholder="100" required/> 8 </div> 9 <div class="currency"> 10 <div class="box"> 11 <select 12 class="select-option" 13 name="from-currency" 14 id="fromCurrency" 15 > 16 <option value="USD">United States Dollar</option> 17 </select> 18 </div> 19 <div> 20 <span>TO</span> 21 </div> 22 <div class="box"> 23 <select class="select-option" name="to-currency" id="toCurrency"> 24 <option value="USD">United States Dollar</option> 25 </select> 26 </div> 27 <button class="convert">Convert</button> 28 <p class="result"></p> 29 <p class="error"></p> 30 31 </div> 32 </div> 33 </div> Currently, we are using the option value as a placeholder. We will replace and add more option data dynamically to our currency converter with JavaScript. Styling with CSS All the greatest currency converter apps start with nice, basic styles. We’ve pulled in the rather excellent Bricolage Grotesque font from Google fonts too: 1 * { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 font-family: 'Bricolage Grotesque', sans-serif; 6 } 7 8 h1 { 9 font-size: 5em; 10 font-weight: bold; 11 text-align: center; 12 margin: .5em 0; 13 line-height: .8; 14 } 15 16 .container { 17 margin: auto; 18 min-height: 100vh; 19 background-color: #202020; 20 padding: 2em 0; 21 color: #040203; 22 display: flex; 23 flex-direction: column; 24 align-items: center; 25 justify-content: center; 26 } 27 28 .currency-container { 29 height: fit-content; 30 background-color: #7cb889; 31 padding: 3em; 32 border-radius: 40px; 33 } For the input and label (including the placeholder in the input) they will have the following styles: 1 .input-box { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 justify-content: center; 6 text-align: center; 7 } 8 9 label { 10 font-size: 1.5em; 11 margin-bottom: .4em; 12 } 13 14 #amount { 15 width: 300px; 16 padding: 20px; 17 border-radius: 30px; 18 font-size: 3em; 19 border: 3px solid black; 20 background: transparent; 21 color: black; 22 23 } 24 #amount:focus { 25 border: 3px solid white; 26 outline: none; 27 } 28 29 ::placeholder { 30 color: rgba(0,0,0,0.6); 31 opacity: 1; /* Firefox */ 32 } Next, we will apply styling to the box elements containing the From and To currency drop-downs. The drop-down elements will be arranged in a column layout using Flexbox. They'll be centered vertically and horizontally. We also have a gap between the box elements, some padding, and a border radius: 1 .currency { 2 margin-top: 50px; 3 padding: 20px 20px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 flex-direction: column; 8 gap: 1.5rem; 9 } 10 11 .box { 12
By the end of this tutorial, you’ll have learned how to build a responsive currency app that fetches real-time data with the Exchange Rate API in a user-friendly interface. Let’s get to it!
Our currency converter demo
To create your own currency converter, you’ll first need to register your own API key from exchangerate-api.com.
I based this design loosely on the excellent Crypto exchange platform by Yev Ledenov on Dribbble.
Currency converter code in HTML
We'll begin with the HTML part of our app. The currency converter code in HTML will give our application a simple interface containing:
- An input field for the amount to be converted
- A drop-down to select the from Currency value
- A second drop-down to select the to currency value
- A convert button
- A
<p>tag to show the converted amount - A
<p>tag to show any errors that might occur during the conversion process
The currency converter HTML code will look like this:
1 |
<div class="container"> |
2 |
|
3 |
<div class="currency-container"> |
4 |
<h1>Currency converter</h1> |
5 |
<div class="input-box"> |
6 |
<label for="amount">Enter amount</label> |
7 |
<input type="text" id="amount" placeholder="100" required/> |
8 |
</div>
|
9 |
<div class="currency"> |
10 |
<div class="box"> |
11 |
<select
|
12 |
class="select-option" |
13 |
name="from-currency" |
14 |
id="fromCurrency" |
15 |
>
|
16 |
<option value="USD">United States Dollar</option> |
17 |
</select>
|
18 |
</div>
|
19 |
<div>
|
20 |
<span>TO</span> |
21 |
</div>
|
22 |
<div class="box"> |
23 |
<select class="select-option" name="to-currency" id="toCurrency"> |
24 |
<option value="USD">United States Dollar</option> |
25 |
</select>
|
26 |
</div>
|
27 |
<button class="convert">Convert</button> |
28 |
<p class="result"></p> |
29 |
<p class="error"></p> |
30 |
|
31 |
</div>
|
32 |
</div>
|
33 |
</div>
|
Currently, we are using the option value as a placeholder. We will replace and add more option data dynamically to our currency converter with JavaScript.
Styling with CSS
All the greatest currency converter apps start with nice, basic styles. We’ve pulled in the rather excellent Bricolage Grotesque font from Google fonts too:
1 |
* { |
2 |
margin: 0; |
3 |
padding: 0; |
4 |
box-sizing: border-box; |
5 |
font-family: 'Bricolage Grotesque', sans-serif; |
6 |
}
|
7 |
|
8 |
h1 { |
9 |
font-size: 5em; |
10 |
font-weight: bold; |
11 |
text-align: center; |
12 |
margin: .5em 0; |
13 |
line-height: .8; |
14 |
}
|
15 |
|
16 |
.container { |
17 |
margin: auto; |
18 |
min-height: 100vh; |
19 |
background-color: #202020; |
20 |
padding: 2em 0; |
21 |
color: #040203; |
22 |
display: flex; |
23 |
flex-direction: column; |
24 |
align-items: center; |
25 |
justify-content: center; |
26 |
}
|
27 |
|
28 |
.currency-container { |
29 |
height: fit-content; |
30 |
background-color: #7cb889; |
31 |
padding: 3em; |
32 |
border-radius: 40px; |
33 |
}
|
For the input and label (including the placeholder in the input) they will have the following styles:
1 |
.input-box { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
align-items: center; |
5 |
justify-content: center; |
6 |
text-align: center; |
7 |
}
|
8 |
|
9 |
label { |
10 |
font-size: 1.5em; |
11 |
margin-bottom: .4em; |
12 |
}
|
13 |
|
14 |
#amount { |
15 |
width: 300px; |
16 |
padding: 20px; |
17 |
border-radius: 30px; |
18 |
font-size: 3em; |
19 |
border: 3px solid black; |
20 |
background: transparent; |
21 |
color: black; |
22 |
|
23 |
}
|
24 |
#amount:focus { |
25 |
border: 3px solid white; |
26 |
outline: none; |
27 |
}
|
28 |
|
29 |
::placeholder { |
30 |
color: rgba(0,0,0,0.6); |
31 |
opacity: 1; /* Firefox */ |
32 |
}
|
Next, we will apply styling to the box elements containing the From and To currency drop-downs. The drop-down elements will be arranged in a column layout using Flexbox. They'll be centered vertically and horizontally.
We also have a gap between the box elements, some padding, and a border radius:
1 |
.currency { |
2 |
margin-top: 50px; |
3 |
padding: 20px 20px; |
4 |
display: flex; |
5 |
align-items: center; |
6 |
justify-content: center; |
7 |
flex-direction: column; |
8 |
gap: 1.5rem; |
9 |
}
|
10 |
|
11 |
.box { |
12 |
display: flex; |
13 |
align-items: center; |
14 |
justify-content: center; |
15 |
}
|
The select-option will have the following styles:
1 |
.select-option { |
2 |
font-size: 16px; |
3 |
color: #333; |
4 |
padding: 20px; |
5 |
display: block; |
6 |
font-weight: 700; |
7 |
line-height: 1.3; |
8 |
width: 100%; |
9 |
max-width: 100%; |
10 |
margin: 0; |
11 |
outline: none; |
12 |
border-radius: 20px; |
13 |
border: 3px solid black; |
14 |
}
|
Finally, the convert button, the result, and the error message elements will have the following styles:
1 |
button { |
2 |
width: 100%; |
3 |
height: 100px; |
4 |
padding: 10px; |
5 |
border-radius: 30px; |
6 |
border: none; |
7 |
font-size: 1.5em; |
8 |
align-items: center; |
9 |
background-color: black; |
10 |
color: #fff; |
11 |
margin-top: 30px; |
12 |
}
|
13 |
.result { |
14 |
color: black; |
15 |
font-size: 2.5em; |
16 |
}
|
17 |
.error { |
18 |
color: #800020; |
19 |
font-size: 12px; |
20 |
}
|
We're getting there! Now, let's convert currency with the JavaScript functionality.
JavaScript currency functionality
The JavaScript currency functionality will have two key parts:
- Getting the currency code, currency name, and flag from the REST countries API
- Getting conversion rate from the Exchange Rate API
REST countries API
The REST countries API provides an API with the endpoint https://restcountries.com/v3.1/all. There, you can filter results by providing the fields you are interested in. In our case, we want the country flag, currency name, and currency code.
The endpoint will look like this:
1 |
https://restcountries.com/v3.1/all?fields=currencies,flag |
And here's how the resulting sample data will look like:
