scrimba
WWDC - currency converter
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

WWDC - currency converter
AboutCommentsNotes
WWDC - currency converter
Expand for more info
index.js
run
preview
console
// Instructions:

// 1. Add the functionality to exchange one currency to another
//(you can use a technology of your choice) 🤖
// 2. Style the app 🎨

// let R = 1.0;
let source_currency = "";
let target_currency = "";
let curr_list = [];

const msg1 = document.getElementById("msg1");
const msg2 = document.getElementById("msg2");
const sliding = document.querySelector(".sliding");
const slider = document.querySelector(".slider");
const nxt_btn = document.getElementById("next");
const convert_btn = document.getElementById("convert");
const datalist = document.getElementById("currency");
const output = document.getElementById("output-text");
const ex_rate_box = document.getElementById("exchange-rate");
const target_currency_box = document.getElementById("target-currency-unit");
const source_currency_box = document.getElementById("source-currency-unit");
const source_amount_box = document.getElementById("original-currency-amount");

// Break the list adding code into a function for easier re-use
const addListEntry = (value, text) => {
// Create a new option element.
var optionNode = document.createElement("option");
// Set the value
optionNode.value = value;
// create a text node and append it to the option element
optionNode.appendChild(document.createTextNode(text));
// Add the optionNode to the datalist
datalist.appendChild(optionNode);
};

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

// gets exchange rate for specific currencies
const 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];
};

// loading the rates in the inputbox
const loadExRate = async (frm, to) => {
// let ex_rate = document.getElementById("exchange-rate")
let rate = await getExRate(frm, to);

ex_rate_box.value = rate;
// disabling the exchange rate inputbox as the value is
// loaded beforehand
ex_rate_box.disabled = "true";
};

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

// it will handel all the logics related to gettng currencies
// and the exchange rate from the internet if exists
const fetchCurrency = async () => {
source_currency = source_currency_box.value.toString();
target_currency = target_currency_box.value.toString();

// basic validations
if (source_currency === target_currency) {
source_currency_box.focus();
alert("source and target currency can't be same or empty !");
return;
} else if (source_currency === "") {
source_currency_box.focus();
alert("source currency can't be empty !");
return;
} else if (target_currency === "") {
target_currency_box.focus();
alert("target currency can't be empty !");
return;
} else {
let s_found = curr_list.find((crr) => crr == source_currency);
let t_found = curr_list.find((crr) => crr == target_currency);

// if source currency is not supported
if (s_found == undefined) {
msg2.innerHTML = `target currency <b>not found</b> for Converting <b>${source_currency}</b> to <b>${target_currency}</b>.\n Enter Exchage rate yourself !`;
animateSlider(false);
// to get a smooth animation without jumping arround
setTimeout(() => ex_rate_box.focus(), 300);
// if target currency is not supported it does not loades the rate and does not
// disable the exchange rate inputbox
} else if (t_found == undefined) {
msg2.innerHTML = `target currency <b>not found</b> for Converting <b>${source_currency}</b> to <b>${target_currency}</b>.\n Enter Exchage rate yourself !`;
animateSlider(false);
// to get a smooth animation without jumping arround
setTimeout(() => ex_rate_box.focus(), 300);
// if exchange rate is found for the source and target
} else {
msg2.innerHTML = `Exchange rate found for Converting <b>${source_currency}</b> to <b>${target_currency}</b> `;
animateSlider(false);
loadExRate(source_currency, target_currency);
// to get a smooth animation without jumping arround
setTimeout(() => source_amount_box.focus(), 300);
}
}
};

// button click event for getting the currencies and fetching the rate
nxt_btn.addEventListener("click", () => {
console.log("Try Using `Enter` from your keyboard inside the inputbox");
fetchCurrency();
});

// key press event for getting the currencies and fetching the rate
document.getElementById("get_curr").addEventListener("keyup", (event) => {
if (event.key == "Enter") {
fetchCurrency();
}
});

// this function converts the source amount by the exchange rate
const getConverted = () => {
// getting the amount and rate in float value
let amt = parseFloat(source_amount_box.value);
let r = parseFloat(ex_rate_box.value);

// basic validations
if (isNaN(amt) || amt <= 0) {
alert("Source ammount need to be a positive number");
source_amount_box.focus();
return;
} else if (isNaN(r) || r <= 0) {
alert("Exchange rate need to be a positive number");
ex_rate_box.disabled = false;
ex_rate_box.focus();
return;
}
// setting the output inside an html element
let res = r * amt;
// console.log(res)
output.innerHTML = `Your <b>${amt.toFixed(
2
)} ${source_currency}</b> is converted to <b>${res.toFixed(
2
)} ${target_currency}</b> 🤑`;
};

// button click event for getting the converted currencies and printing the output
convert_btn.addEventListener("click", () => {
console.log("Try Using `Enter` from your keyboard inside the inputbox");
getConverted();
});

// key press event for getting the converted currencies and printing the output
document.getElementById("get_conv").addEventListener("keyup", (event) => {
if (event.key == "Enter") {
getConverted();
}
});

// change button
document.querySelector(".change").addEventListener("click", () => {
// animate to prev window
animateSlider(true);
// reset
ex_rate_box.disabled = false;
ex_rate_box.value = "";
output.innerHTML = "Converted 💰 will appear here.";
});

// document.addEventListener("DOMContentLoaded", () =>)
// loading currency datalist and array on load
loadSupporedCurrencies();

// swaping source and target currency on button press
document.querySelector(".exchange_button").addEventListener("click", () => {
let temp = source_currency_box.value;
source_currency_box.value = target_currency_box.value;
target_currency_box.value = temp;
});
Console
"Try Using `Enter` from your keyboard inside the inputbox"
,
/index.html
LIVE