Guide to building a Currency Convertor using fixer API

Guide to building a Currency Convertor using fixer API
Guide to building a Currency Convertor using fixer API

An API or an Application Programme Interface is a tool to connect the user and the server. The data that the user seeks is brought to him with the help of an API.

Not only this, the interpretation and conversion of data received by the server are also done with the assistance of an API. We use APIs every day without even knowing. This is essential because of the ease of utilising the functions of an API by the user. 

Have you ever searched for a location on Google Maps? If you have, you have already come across a very powerful API which has a location and routing features. You send a ‘request’ to the API to fetch you a particular location, the API ‘retrieves’ the data from the server and performs necessary operations to convert it into a user-interpretable form and then sends you the ‘response’ in terms of the result of the location or the fastest route to reach depending upon your request. 

Some famous APIs used by developers include the Twitter API, Reddit API etc. 

What is Fixer API?

Fixer API is an API which is used to retrieve current and historical foreign exchange (forex) rates. It has been used by a large number of developers worldwide and has exchange rate data for 170 countries which is updated in every 60 seconds (pretty accurate, isn’t it?). Fixer API uses data from various trusted sources including the European Central Bank.

Fixer API is extremely easy to use and implement in one’s a website and code. Detailed documentation serves as the cherry on the cake which allows even beginner level coders to understand the usage of this API thoroughly. Not only this, the data that is delivered by this API is correct up to 6 decimal places which clearly signifies the ease and accuracy combo Fixer API offers,

To begin using this API, you can create an account on their official website (link to the same is provided at the end of the article). After creating an account, head over to your dashboard and copy the unique API key generated. The API keys basically track what and who is utilising the data. You do not have to copy the key in the screenshot as I have reset my key and the older one won’t be live anymore. It is a good practice to keep your API keys hidden even when you are creating a resource for educational purposes.

What are we going to build today?

Today we will be building a simple currency convertor using Fixer API which converts the amount entered instantly as the user types in a number. This is how our webpage will look:

I have entered the following currencies; you can add as many as you want. Also, I have set the default base currency as USD and to be converted to INR.

How to create the front end of our currency convertor?

We shall begin with creating a basic HTML Boilerplate, attach our stylesheet and specify meta tags. This is how your code should look like at this point:

blog banner 1

Next, we begin to write the contents of our webpage. Create a mind map of what you need in your webpage: you need a heading, an image, a table with two rows and two columns – one column containing the text input and the other column containing a dropdown selection menu for your currencies. 

We first specify our heading inside an H2 tag and then then we insert an image. In the next row of the table, our first column has to contain a text input therefore we use the input tag and specify its type to be ‘text’. We set the default value to 1.

To enable our application to have the functionality of instantly converting the entered amount, we need to use the “onkeyup” attribute and call the function ‘currencyConvertor()’ when the user enters any amount.

In the select menu, I have added some popular currencies and set their values to be their corresponding currency codes. A similar approach has been taken for both base and convertedCurrency rows.

The following two images depict how your code should look like at this point:

Now that our HTML page is ready, we can start stylising and making it visually attractive. I have used a Google Font, Poppins, you can find the link to the same towards the end of the article. I have added all the contents of the container inside a flexbox and aligned the contents to centre both horizontally and vertically. 

The styling is pretty basic and does not require any further explanation. Your CSS stylesheet should look like the following image:

How to connect our application with Fixer API?

We will be utilising XML HTTP requests to fetch data using the Fixer API and then integrating the same to our application. The steps to do the same are:

Step 1: Declare the variables

Declare variables for your API key, a variable which fetches the input area of the base currency and a variable which fetches the input area of the converted currency. 

Step 2: Create a new HTTP request

Create a new variable, you can name it anything I have named it xmlhtpp to clearly specify the function of our variable. The XMLHttpRequest() function has been utilised dynamically and has been assigned to our variable. 

Step 3: Create a URL

The URL from which we have to fetch our data for currency conversion contains parameters of the base currency code and to be currency code in the link itself. Notice that these variables will change based on the options being selected by the user and hence it is logical to concatenate the URL string with variables instead of pre-defined words. You can also replace the access key with the API_KEY variable by using concatenation.

Step 4: Send a request to the API

Now utilise the xmlhttp.open() function to specify what is being requested from the API. We have to specify three parameters in this function – first is the method to be used, second is the URL from which the data has to be fetched and the third is async which is set to true if it is asynchronous. We are using the GET method and passing in our URL and true as the other parameters.  After this, use xmlhttp.send() function to send the request to the API.

Step 5: Utilise the data received

After the data is received from the API, the state changes and hence we have to perform our calculations and modifications following the same. The ready state 4 signifies that the process/operation is completed and status 200 specifies that the HTTP request has succeeded. 

You can store the data received in a variable using xmlhttp.responseText. Remember that the data that is being received from the API is received in a single but extremely long string format and to use it as per your convenience you need to convert it to a JavaScript object first. To do so, JSON.parse() function is used. 

The data received from the API is the current rate of the currency and we need to convert it to the cost of one unit. We calculate the same by dividing the rate of to be converted currency by the base currency and then we multiply the result with the amount to be converted and display it on our page. 

Finally, this is how our script will look like: 

Useful Links
Fixer API official website: https://fixer.io/
Currency Codes: https://www.iban.com/currency-codes
Poppins Font: https://fonts.google.com/specimen/Poppins

Happy Learning with Coding Ninjas and through our insightful blogs.

By Pooja Gera