Конвертер валют позволяет пользователю выбрать значение для своей валюты и взамен получить равное значение для другой валюты. Целью этого проекта является создание конвертера валют, предназначенного для африканского рынка, но в будущем я намерен расширить его и добавить больше валют, а также превратить его в мобильное приложение.
Основной HTML
Для начала я разместил все свои HTML, CSS, JavaScript и изображения в соответствующих папках. HTML-файл будет находиться в корневой папке вместе с файлом README.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>African Currency Exchange</title> </head> <body> <div class="wrapper"> <marquee scrollamount="5" class="setMcolor">DZD(Algeria Dinar) | AOA(Angola Kwanza) | BWP(Botswana Pula) BIF(Burundian Franc) | CVE(Cape Verdean Escudo) | CFA(XOF/XAF) | CDF(Congolese Franc) GDM(Gambian Dalasi) | DJF(Djiboutian Franc) | EGP(Egyptian Pound) | ERN(Eritiran Nakfa) ETB(Ethiopian Birr) | GHS(Ghanian Cedi) | GNF(Guinean Franc) | KSH(Kenyan Shilling) | LSL(Lesotho Loti) | LRD (Liberian DOllar) | LYD(Libyan Dinar) | SZL(Eswatini Lilangeni) | MGA(Malagasy Ariary) | MWK(Malawin Kwacha) | MUR(Mauritian Rupee) | MAD(Morroccan Dirham) | MZN(Mozambican Metical) | NAD(Namibian Dollar) | NGN(Nigerian Naira) | MRU(Mauritanian Ouguiya) | UDS(ZIMBABWE) | RWF(Rwandan Franc) | STN(Sao Tome Dobra) | SCR(Seychelleois Rupee) | SLL(Sierra Leonan Leone) | SOS(Somali Shilling) | ZAR(South African Rand) | SSP(South Sudan Pound) | SDG(Sudanese Pound) | TZS(Tanzanian Shilling) | UGX(Ugandan Shilling) | ZMW(Zambian Kwacha) </marquee> <div class="left-col"> <img src="images/logo.png" alt="Logo" class="logo"> <div class="content"> <h1>Live Exchange Rates</h1> <p>USD, GPB, ZAR, EURO, <br> INR, CAD, JPY etc.</p> <div class="container"> <div class="currency"> <p>FROM:</p> <select name="" id="currency-1"> <option value="KES">KES</option> <option value="TZS">TZS</option> </select> <!--Deleted placeholder of 1 and added Enter--> <input type="number" id="amount-one" placeholder="Enter" value="" /> </div> <div class="swap-rate-container"> <button class="swapBtn" id="swap">Swap</button> <div class="rate" id="rate"></div> </div> <div class="currency"> <p>TO: </p> <select id="currency-2"> <option value="KES">KES</option> <option value="TZS">TZS</option> </select> <!--Deleted placeholder og 1 and left empty--> <input type="number" id="amount-two" placeholder="" /> </select> </div> </div> </div> </div> <div class="right-col"> <div class="slider"> <img src="images/img1.jpg" id="slide"> </div> <div class="slider-content"> <h2>FOREIGN EXCHANGE TIPS</h2> <hr> <p>There are a few exchange offices in each tourist destination that don't charge extra costs <br>for money conversion. The wisest course of action would be to stay away from these locations because they often have the lowest exchange rates.</p> <div class="controller"> <img src="images/back.png" alt="back" id="backBtn"> <div class="vertical-line"></div> <img src="images/next.png" alt="next" id="nextBtn"> </div> </div> </div> </div> <script src="js/index.js"></script> </body> </html>
В приведенном выше html-файле я также связал файлы CSS и JavaScript. Элементы включают текст выделения, который отображает информацию о различных валютах африканских стран. Выберите и введите теги, которые позволят пользователю выбрать валюту по своему выбору. Тип входного тега установлен как число, поэтому пользователи смогут работать только с целыми числами. Чтобы добавить, кнопка обмена размещена в центре, чтобы пользователи могли обменивать валюты. Например, я могу посмотреть курс валюты для KES → UGX, а затем принять решение об обмене на UGX → KES.
JAVASCRIPT
Файл JavaScript будет включать функции, необходимые приложению для выполнения правильных вычислений. Один из способов сделать это — использовать API (интерфейс прикладного программирования). Для этого конкретного приложения было бы целесообразно использовать общедоступный API из-за того, что курсы валют имеют тенденцию к постоянным колебаниям. Например, в один момент 1 доллар США → KES 120, а на следующий день вы можете найти 1 доллар США → KES 115. Таким образом, использование общедоступного API вместо данных JSON сэкономит разработчику много времени с точки зрения ежедневного обновления сервера.
В следующем коде показано, как данные из exchangerates-api были получены с помощью fetch.
//fetch currency rates from exchangerate-api
function calculate(){
const currency_1 = currency1.value;
const currency_2 = currency2.value;
//Extract rates for the currency therefore I will add ${cuurency_1}, which will allow to fetch currency depending on whichever value I select
fetch(`https://v6.exchangerate-api.com/v6/c50c0dd18c871c23de59c4e4/latest/${currency_1}`)
.then(response => response.json())
.then((data) => {
// console.log(data);
//Conversion rate is triggered when the user clicks the swap button
const rate = data.conversion_rates[currency_2];
Convrate.innerText = `1 ${currency_1} = ${rate} ${currency_2}`;
amount2.value = (amount1.value * rate).toFixed(2);
});
}
//An event listener button that will allow the functionality of swapping currencies. Eg. GBP to USD --> USD to GBP
swap.addEventListener('click', () => {
const tempVar = currency1.value;
currency1.value = currency2.value;
currency2.value = tempVar;
calculate();
})
Демо
Ссылки
