Photo by Jason Leung on Unsplash

Creating a Currency Converter with pure JS with exchangerate api

I will show how to build a currency converter with these following features:

  1. Fetch the exchange rate from internet(with the help of exchangerateapi)
  2. Give users freedom to enter exchange if it is not in our list.
  3. Making a cool animation. 😍

So Where to Start ?

I started in my favorite code editor VS Code by creating a index.html in a separate empty folder and added index.js and index.css Or You can just go with codepen and click on pen to get started.

Setting up HTML and CSS

I set my page for a three column three row layout with css grid and warapped all the page inside a container div.

display: grid;
grid-template:
"title title title" minmax(min-content, 5rem)
". content ." minmax(100px, auto)
"footer footer footer" minmax(2.5rem, max-content)
/ minmax(20px, 1fr) 5fr minmax(20px, 1fr);
.slider {
width: 100%;
transform-style: preserve-3d;
display: grid;
grid-template-columns: repeat(2, 100%);
transform: translateX(0);
transition: transform 450ms;
}

Making Interactive with JavaScript

To slide between the windows I built a function which will get the width to the current viewing window(div) and transform = translateX(width) and to get back to previous div it will just do translateX(0). I made a function to do just that:

// animating between two divs
// `true` for backward animation
// `false` for forward animation
const animateSlider = (isPositive) => {
// dynamically getting the length to translate
let to_translate = sliding.offsetWidth;
if (isPositive) {
slider.style.transform = `translate(0px)`;
} else {
slider.style.transform = `translate(${-to_translate}px)`;
}
};
//for click event listners
document.getElementById("id").addEventListener("click", functionToExecute)
// for key event listners
document.getElementById("id").addEventListener("keyup",(event) => {
if (event.key == "Enter") {
functionToExecute();
}
});

Fetching Currency Info from exchangerate api

Exchange rates API is a free service for current and historical foreign exchange rates published by the European Central Bank. Using it with fetch the JavaScript loads the supported currencies into two lists(datalist and array), one for UI suggestion in the text box and other to verify that if our page will be able to translate the source currency to target currency, if not user will be offered to enter custom exchange rate for that unsupported currency and if found the input box for Exchange rate will be grayed out and made read-only.

// gets exchange rate for specific currenciesconst getExRate = async (frm, to) => {
let req_url = `https://api.exchangeratesapi.io/latest?base=${frm}&symbols=${to}`;
let res = await fetch(req_url);
let data = await res.json();
return data.rates[to];
};
// this func will load all supported currencies into a datalist
// and in an array for some logical operation later
const loadSupporedCurrencies = async () => {
// reseting all the inputbox values
ex_rate_box.value = "";
source_amount_box.value = "";
source_amount_box.value = "";
target_currency_box.value = "";
// getting all the supported currencies from `exchangeratesapi`
let response = await fetch("https://api.exchangeratesapi.io/latest");
let data = await response.json();
// adding the base currency to the list
addListEntry(data.base, data.base);
curr_list.push(data.base);
// Read currencies as key from the json obj and pushing into the list
for (let key in data.rates) {
addListEntry(key, key);
curr_list.push(key);
}
};

who loves to learn new things