Photo by Jason Leung on Unsplash

Creating a Currency Converter with pure JS with exchangerate api

So Where to Start ?

Setting up HTML and CSS

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

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

// 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);
}
};

Tech Nerd learning about AI, IT Security

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store