Create a Currency Converter with HTML, CSS, and Vanilla JavaScript

HTML Structure

Our rate exertion will person a elemental interface containing :

• An input section for nan magnitude to beryllium converted.
• A drop-down to prime nan from Currency value
• A 2nd drop-down to prime nan to rate value
• A person button
• A <p> tag to show nan converted amount
• A <p> tag to show immoderate errors that mightiness hap during nan conversion process.

The HTML code  will look for illustration this:

Currently, we are utilizing nan action worth arsenic a placeholder. We will switch and adhd much action information dynamically pinch JavaScript.

Styling With CSS

Let’s commencement pinch immoderate basal styles. We’ve pulled successful nan alternatively fantabulous Bricolage Grotesque font from Google fonts too:

For nan input and explanation (including nan placeholder successful nan input) they will person nan pursuing styles:

Next, we will use styling to nan container elements containing nan From and To rate drop-downs. The drop-down elements will beryllium arranged successful a file layout utilizing Flexbox and centered vertically and horizontally. We besides person a spread betwixt nan container elements, immoderate padding, and a separator radius.

 The select-option will person nan pursuing styles

Finally, nan person button, nan result, and nan correction connection elements will person nan pursuing styles:

JavaScript Functionality

The JavaScript functionality will person 2 parts:

• Getting nan rate code, rate name, and emblem from nan REST countries API
• getting conversion complaint from nan Exchange Rate API

REST Countries API

The REST countries API provides an API pinch nan endpoint https://restcountries.com/v3.1/all wherever you tin select results by providing nan fields you are willing in. In our case, we want nan state flag, rate name, and rate codification and nan endpoint will look for illustration this:

The resulting sample information will look for illustration this:

To make it easier to show our currencies, we will fetch nan information and shop it successful a JavaScript file. The book for fetching nan information will look for illustration this:

The codification supra does nan following:

• We usage nan fetch() method to make an HTTP petition to nan REST countries API.
• Then, we person nan consequence to JSON format and commencement processing nan data.
• From nan consequence JSON, we first cheque if each state has a rate codification since not each countries person a rate code.
• If a state has a currency, we create an entity pinch its name, code, and rate sanction and push it to nan quiet consequence array.
• Then we benignant nan rate codification alphabetically.
• Finally, we person nan consequence to JSON and people nan stringified information to nan console.

When you tally nan book successful a browser environment, you should beryllium capable to transcript nan information to your JavaScript file. The information looks for illustration this:

Alternatively, adhd this link to your book utilizing nan src attribute.

Next, let’s get nan prime elements.

Since we person nan information successful an array, it’s now easier to append nan currencies to nan action elements of nan fromCurrency and toCurrency prime elements.

Create a usability called addCurrency(). Inside nan addCurrency() function, we usage nan forEach() usability to loop done nan currencies array; for each iteration, we want to adhd nan rate codification to nan action constituent and append nan action constituent to some nan prime elements.

In nan codification above, we usage nan ForEach() usability to iterate connected each nan currencies array information and do nan following:

• Extracts nan rate cardinal from nan currencies array  for each currency
• gets nan flag
• gets nan rate name
• Creates an HTML action constituent for nan "fromCurrency" prime dropdown  . 
• sets nan action worth to nan rate code
• Sets nan action matter to a operation of nan flag, nan rate name, and nan rate code
• Appends nan created action constituent to nan "fromCurrency" prime dropdown.
• Creates different action constituent for nan "toCurrency" prime dropdown pinch nan aforesaid information arsenic nan fromCurrency
• Appends nan created action constituent to nan "toCurrency" prime dropdown.
• Finally we invoke nan addCurrency() usability to use nan functionality.

The action worth will beryllium nan rate code, and nan action matter will beryllium nan rate flag, rate code, and rate sanction separated by a hyphen.

We besides group nan default rate successful nan fromCurrency action constituent to USD and nan default rate for nan toCurrency action constituent to EUR.

Now our driblet down are showing nan currencies.

Code Refactoring

From nan addCurrency() usability you tin spot that we are repeating nan aforesaid codification to adhd nan action values. Let’s create different usability for generating nan options for each rate element.

The usability will look for illustration this:

The createOption() usability takes 3 parameters: nan state object, nan default code, and nan constituent wherever nan options will beryllium appended.  

Next, update nan addCurrency() usability arsenic follows:

The usability is now easier to publication since we don’t person immoderate repetitive code.

Currency Conversion

We will usage nan ExchangeRate API for rate conversion. The ExchangeRate API  provides rate conversion rates for 161 currencies.

The API allows developers to person currencies by providing a brace of rate codes successful nan request. For example, if you want to person USD to EUR, your API telephone will look for illustration this:

The endpoint will springiness america nan pursuing result.

Since we already person nan codes successful our prime options, we will walk nan values successful nan API and multiply nan conversion complaint by nan magnitude to get nan result. 

Create a usability called convertCurrency() function. In nan function:

• get nan show element
• get nan values from nan selected options
• Store nan url successful a variable.

Ensure you proviso your API cardinal from nan Exchange Rate API. You tin get 1 for free here.

In nan convertCurrency() function, we first cheque if a valid magnitude has been entered, and if true, we execute a GET petition to nan speech complaint API pinch nan rate pairs.

The consequence will incorporate nan conversion rate. Finally we update nan consequence pinch a formatted converted amount

If an correction occurs, we show a connection to nan user, letting them cognize thing went wrong. 

For nan conversion to work, let’s adhd an arena listener to nan person fastener and invoke nan convertCurrency() function, arsenic shown below.

Final Result

Here is nan last result!

Conclusion

This tutorial has covered really to build a rate converter that fetches real-time information from nan Exchange Rate API. Ensure you get your free API cardinal from nan ExchangeRateAPI, and person nosy building things!