Create a currency converter with HTML, CSS, and vanilla JavaScript

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.

<br />

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:

<div class="container">

 <div class="currency-container">
 <h1>Currency converter</h1>
 <div class="input-box">
 <label for="amount">Enter amount</label>
 <input type="text" id="amount" placeholder="100" required/>
 </div>
 <div class="currency">
 <div class="box">
 <select
 class="select-option"
 name="from-currency"
 id="fromCurrency"
 >
 <option value="USD">United States Dollar</option>
 </select>
 </div>
 <div>
 <span>TO</span>
 </div>
 <div class="box">
 <select class="select-option" name="to-currency" id="toCurrency">
 <option value="USD">United States Dollar</option>
 </select>
 </div>
 <button class="convert">Convert</button>
 <p class="result"></p>
 <p class="error"></p>

 </div>
 </div>
</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:

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Bricolage Grotesque', sans-serif;
 }

 h1 {
 font-size: 5em;
 font-weight: bold;
 text-align: center;
 margin: .5em 0;
 line-height: .8;
 }

 .container {
 margin: auto;
 min-height: 100vh;
 background-color: #202020;
 padding: 2em 0;
 color: #040203;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }

 .currency-container {
 height: fit-content;
 background-color: #7cb889;
 padding: 3em;
 border-radius: 40px;
 }

For the input and label (including the placeholder in the input) they will have the following styles:

 .input-box {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 }

 label {
 font-size: 1.5em;
 margin-bottom: .4em;
 }

 #amount {
 width: 300px;
 padding: 20px;
 border-radius: 30px;
 font-size: 3em;
 border: 3px solid black;
 background: transparent;
 color: black;

 }
 #amount:focus {
 border: 3px solid white;
 outline: none;
 }

 ::placeholder {
 color: rgba(0,0,0,0.6);
 opacity: 1; /* Firefox */
 }

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:

 .currency {
 margin-top: 50px;
 padding: 20px 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 1.5rem;
 }

 .box {
 display: flex;
 align-items: center;
 justify-content: center;
 }

The select-option will have the following styles:

 .select-option {
 font-size: 16px;
 color: #333;
 padding: 20px;
 display: block;
 font-weight: 700;
 line-height: 1.3;
 width: 100%;
 max-width: 100%;
 margin: 0;
 outline: none;
 border-radius: 20px;
 border: 3px solid black;
 }

Finally, the convert button, the result, and the error message elements will have the following styles:

 button {
 width: 100%;
 height: 100px;
 padding: 10px;
 border-radius: 30px;
 border: none;
 font-size: 1.5em;
 align-items: center;
 background-color: black;
 color: #fff;
 margin-top: 30px;
 }
 .result {
 color: black;
 font-size: 2.5em;
 }
 .error {
 color: #800020;
 font-size: 12px;
 }

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:

{
 "name": {
 "common": "Eritrea",
 "official": "State of Eritrea",
 "nativeName": {
 "ara": {
 "official": "دولة إرتريا",
 "common": "إرتريا‎"
 },
 "eng": {
 "official": "State of Eritrea",
 "common": "Eritrea"
 },
 "tir": {
 "official": "ሃገረ ኤርትራ",
 "common": "ኤርትራ"
 }
 }
 },
 "currencies": {
 "ERN": {
 "name": "Eritrean nakfa",
 "symbol": "Nfk"
 }
 },
 "flag": "🇪🇷"
 },

To make it easier to display our currencies, we will fetch the data and store it in a JavaScript file.

The script for fetching the data will look like this:

const url =
 "https://restcountries.com/v3.1/all?fields=name,currencies,flag";
fetch(url)
 .then((response) => response.json())
 .then((data) => {

 const result = [];
 data.forEach((country) => {
 if(Object.keys(country.currencies).length >0) {
 result.push({
 countryname: country.name.common,
 name: Object.values(country.currencies)[0].name,
 code: Object.keys(country.currencies)[0],
 flag: country.flag,
 });
 }
 });

 result.sort((a, b) => a.code.localeCompare(b.code));
 const jsonString = JSON.stringify(result, null);
 console.log(jsonString);

 });

The code above does the following:

We use the fetch() method to make an HTTP request to the REST countries API.
Then, we convert the response to JSON format and start processing the data.
From the response JSON, we first check if each country has a currency code—since not all countries have one.
If a country has a currency, we create an object with its name, code, and currency name and push it to the empty result array.
Next, we sort the currency code alphabetically.
Finally, we convert the result to JSON and print the stringified data to the console.

When you run the script in a browser environment, you should be able to copy the data to your JavaScript currency file. The data looks like this:

Create a currency converter with JavaScript.

Another options is to add this link to your script using the src attribute.

Next, let’s get the select elements:

1	let fromCurrency = document.getElementById("fromCurrency");
2	let toCurrency = document.getElementById("toCurrency");

We have the data in an array, so it’s easier to append the currencies to the option elements of the fromCurrency and toCurrency select elements.

�

Create a function called addCurrency(). Inside the addCurrency() function, we use the forEach() function to loop through the currencies array. For each iteration, we want to add the currency code to the option element and append the option element to both the select elements:

 const result = currencies.forEach((currency) => {

 const optionFrom = document.createElement("option");
 optionFrom.classList.add("select-option");
 optionFrom.value = currency.code;
 if(currency.code === "USD") {
 optionFrom.selected = true;
 }
 optionFrom.text =`${currency.flag}${currency.code} -${currency.name}`;

 fromCurrency.appendChild(optionFrom);

 const optionTO = document.createElement("option");
 optionTO.classList.add("select-option");
 optionTO.value = currency.code;
 if(currency.code === "EUR") {
 optionTO.selected = true;
 }
 optionTO.text =`${currency.flag}${currency.code} -${currency.name}`;
 toCurrency.appendChild(optionTO);
 });

In the code above, we use the ForEach() function to iterate on each the currencies array data and do the following:

Extracts the currency key from the currencies array for each currency.
Gets the flag.
Gets the currency name.
Creates an HTML option element for the “fromCurrency” select dropdown.
Sets the option value to the currency code.
Sets the option text to a combination of the flag, the currency name, and the currency code.
Appends the created option element to the “fromCurrency” select dropdown.
Creates another option element for the “toCurrency” select dropdown with the same data as the fromCurrency.
Appends the created option element to the “toCurrency” select dropdown.
Finally, we invoke the addCurrency() function to apply the functionality.

The option value will be the currency code. The option text will be the currency flag, currency code, and currency name separated by a hyphen.

We also set the default currency in the fromCurrency option element to USD. We set EUR as the default currency for the toCurrency option element.

Now, our drop down is showing the currencies.

Code refactoring

From the addCurrency() function, you can see that we are repeating the same code to add the option values. Let’s create another function for generating the options for each currency element.

The function will look like this:

function createOption(country, defaultCode, element ){
 // console.log(country);
 const option = document.createElement("option");
 option.classList.add("select-option");
 option.value = country.code;
 if(country.code === defaultCode) {
 option.selected = true;
 }
 option.text = `${country.flag}${country.code} -${country.name}`;
 element.appendChild(option);


}

The createOption() function takes three parameters:

the country object
the default code
the element where the options will be appended

Next, update the addCurrency() function as follows:

function addCurrency() {
 const result = countries.map((country) => {
 createOption(country, "USD", fromCurrency );
 createOption(country, "EUR", toCurrency )

 });
}

The function is now easier to read since we don’t have any repetitive code.

Currency conversion

We will use the ExchangeRate API for currency conversion. The ExchangeRate API provides currency conversion rates for 161 currencies.

Head over towww.exchangerate-api.com and get a Free API key.

The API allows developers to convert currencies by providing a pair of currency codes in the request. For example, if you want to convert USD to EUR, your API call will look like this:

1	https://v6.exchangerate-api.com/v6/24faec6b42da4a96ceea41d3/pair/USD/EUR

The endpoint will give us the following result:

{
 "result": "success",
 "documentation": "https://www.exchangerate-api.com/docs",
 "terms_of_use": "https://www.exchangerate-api.com/terms",
 "time_last_update_unix": 1703721602,
 "time_last_update_utc": "Thu, 28 Dec 2023 00:00:02 +0000",
 "time_next_update_unix": 1703808002,
 "time_next_update_utc": "Fri, 29 Dec 2023 00:00:02 +0000",
 "base_code": "USD",
 "target_code": "EUR",
 "conversion_rate": 0.9015
}

Since we already have the codes in our select options, we will pass the values in the API and multiply the conversion rate by the amount to get the result.�

Create a function called convertCurrency() function. In the function:

Get the display element
Get the values from the selected options
Store the url in a variable

const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;
const fromCurrrencyCode = document.getElementById("fromCurrency").value;
const toCurrencyCode = document.getElementById("toCurrency").value;
const result = document.querySelector(".result");
const error = document.querySelector(".error");

Ensure you supply your API key from the Exchange Rate API. You can obtain one for free here.

In the convertCurrency() function, we first check if a valid amount has been entered. If true, we perform a GET request to the exchange rate API with the currency pairs.

The response will contain the conversion rate. Finally we update the result with a formatted converted amount:

function convertCurrency() {
 const BASE_URL = `https://v6.exchangerate-api.com/v6/${apiKey}`;

 const fromCurrrencyCode = document.getElementById("fromCurrency").value;
 const toCurrencyCode = document.getElementById("toCurrency").value;
 const result = document.querySelector(".result");
 const error = document.querySelector(".error");

 console.log(fromCurrrencyCode);
 console.log(toCurrencyCode);

 const amount = input.value;

 if(amount !== "" && parseFloat(amount) >= 1) {
 const url = `${BASE_URL}/pair/${fromCurrrencyCode}/${toCurrencyCode}`;
 console.log(url);
 fetch(url)
 .then((resp) => resp.json())
 .then((data) => {
 console.log(data.conversion_rate);

 const conversionResult = (amount * data.conversion_rate).toFixed(
 2
 );
 const formattedResult = conversionResult.replace(
 /B(?=(d{3})+(?!d))/g,
 ","
 );

 result.innerHTML = `${amount}${fromCurrrencyCode} =${formattedResult}${toCurrencyCode}`;
 amount.innerHTML = "";
 })
 .catch(() => {
 error.textContent = "An error occured, please try again later";
 });
 } else {
 alert("Please enter an amount");
 }
}

If an error occurs, we display a message to the user, letting them know something went wrong.�

For the conversion to work, let’s add an event listener to the convert button and invoke the convertCurrency() function, as shown below:

1	const convertBtn = document.querySelector(".convert");
2	convertBtn.addEventListener("click", () => {
3	convertCurrency();
4	});

Final result

Congratulations! You just created a nice and easy currency converter app. Here is the final result:

<br />

Keep learning, keep creating!

There you go! This tutorial has covered how to build an easy currency converter app that fetches real-time data from the Exchange Rate API.

You can add other functionalities to your website with plugins and templates designed by the pros. That’s where Envato comes in! For a low monthly fee, you’ll get unlimited downloads of web templates, WordPress plugins, CMS themes, and so much more.

Ensure you get your free API key from the ExchangeRateAPI, explore the Envato library, and have fun building things!