I’m having a code challenges, am to create a currency converter page, I was suppose to fetch an API. Am a bit lost here, I don’t know to do next. please, I need help or tips on what to do next. below are my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Mini App</title>
<style>
body{
background-color: white;
}
</style>
</head>
<body>
<h2>Cassyblaise DanDollar</h2>
<div class="select-currency select">
<select class="select-text">
<option disabled select>Choose currency</option>
</select>
</div>
<button class="btn" type="submit">Convert</button>
<div class="conversion mdc-elevation--z3">
<div class="messages">
</div>
</div>
<script>
const currencies = [{
id: 'USD', name: 'US Dollars'
}, {
id: 'UGX', name: 'Ugandan Shillings'
}, {
id: 'KES', name: 'Kenyan Shillings'
}, {
id: 'GHS', name: 'Ghanian Cedi'
}, {
id: 'ZAR', name: 'South African Rand'
}];
const apiBase = 'https://free.currencyconverterapi.com/api/v6/';
const api = (currency) => `
${apiBase}convert?q=${currency}_NGN&compact=ultra
`;
const toast = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const doneToasting = () => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = '';
toastr.classList.remove('on');
};
const conversionSucceeded = (apiResponse) => {
if(!apiResponse) {
toast(`nothing to display ...`);
return;
}
const [value] = Object.values(apiResponse)
const btn = document.querySelector('button');
btn.removeAttribute('disabled');
const display = document.querySelector('.conversion');
const formatter = new Intl.NumberFormat(
'en-NG', { style: 'currency', currency: 'NGN' }
);
display.textContent = formatter.format(value);
doneToasting();
};
// declare populateCurrencies here
const getSelectedCurrency = () => {
// here, determine and return the selected value
// of the SELECT element
};
const convert = (event) => {
toast(`preparing to convert ...`);
const btn = event ?
event.target : document.querySelector('button');
const selected = getSelectedCurrency();
if(!selected || selected.trim() === ''
|| !currencies.map(c => c.id).includes(selected)) return;
btn.setAttribute('disabled', 'disabled');
toast(`converting ...`);
const endpoint = api(selected);
// make a GET fetch call to the endpoint
// variable declared above, convert the response to JSON,
// then call conversionSucceeded and pass the JSON data to it
};
const startApp = () => {
// call populateCurrencies here
// add a click listener to the button here
};
startApp();
</script>
</body>
</html>