👩‍🏫 Courses

Currency Converter

Coding Challenge :: Currency Converter

Problem Statement: Create a currency converter

Create a currency converter app that converts one currency into another in order to check its corresponding value.

Here's the final version of the app 💵 💷 💴 Currency Converter

Action Plan:

  1. Determine input & output fields
  2. Define folder struture
  3. Add content to the html page
  4. Add styling using CSS
  5. Add interaction using JavaScript & make the app dynamic by connecting to a database of current currency exchange rates
  6. Publish the app.

Plan Execution

  1. Determine input & output fields

Let's determine input and output values for our currency converter app

  • Input Fields
    • Amount to convert
    • From Curreny: i.e. the currency to convert from
    • To Curreny: i.e. Currency to convert to
  • Output Fileds
    • Applicable exchange rate for conversion
    • Corresponding amount in target currency
  1. Define folder struture

Use a code editor (recommended: VS Code) to create a basic folder structure and files.

Folder: Currency converter app:

|__ index.html
|__ index.js
|__ css -> style.css
  1. Add content to html page

Now we'll add elements to the html page to display input & output value.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Currency Convertor</title>
<div id="container" class="bg-image">
<h1>Amazing Currency Converter</h1>
<input type="number" min="1" id="original-currency-amount" placeholder="Amount"></input>
<select id="original-currency-unit"></select>
<select id="new-currency-unit"></select>
<span id="span-exchange">Exchange Rate:</span>
<input type="number" id="exchange-rate" readonly></input>
<button id="btn-exchange">Exchange my money now!</button>
<p id="output-text">
<script src="index.js"></script>
  1. Add styling using CSS

I'll perform these steps while adding styling to the html page:

  • Link css file with html file.
  • Style input & output fields

Here's what my styling looks like:

body {
text-align: center;
font-family: sans-serif;
font-size: 20px;
color: brown;
h1 {
padding-top: 100px;
font-size: 40px;
color: brown;
.bg-image {
background-image: url("../images/gear-currency-bg-1.jpg");
margin-top: 100px;
height: 500px;
background-position: center;
background-repeat: no-repeat;
input, select {
border: 2px solid gray;
border-radius: 10px;
input {
width: 100px;
height: 21px;
font-size: 16px;
margin: 10px auto;
padding: 7px 20px;
select {
width: 100px;
height: 40px;
font-size: 16px;
margin: 10px auto;
padding: 5px 20px;
input:focus, button:focus, select:focus {
outline: none;
border-color: brown;
button {
width: 300px;
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: brown;
color: white;
button:hover, button:hover {
background-color: lightgoldenrodyellow;
color: brown;
#exchange-rate {
display: none;
#span-exchange {
display: none;
  1. Add interaction using JavaScript & make the app dynamic by connecting to an API.
    Perform these steps while adding interactivity to the html page:
  • Link js file with html file.
  • Grab elements from html & read values provided by user
  • Validation of fields to ensure user provides all mandatory values
  • Add event listenrs for button to perform action and dispaly results
  • Make the app dynamic by connecting to an API.

I used Foreign exchange rates API that is a free service for current and historical foreign exchange rates published by the European Central Bank.

You can also use ExchangeRate-API

Here is the JS Code:

let currencyAmtSelector = document.getElementById("original-currency-amount");
let originalCurrencySelector = document.getElementById("original-currency-unit");
let newCurrencyUnitSelector = document.getElementById("new-currency-unit");
let exchangeRateSelector = document.getElementById("exchange-rate");
let btnExchange = document.getElementById("btn-exchange");
let outputText = document.getElementById("output-text");
let spanExchange = document.getElementById("span-exchange");
let originalCurrencyAmount, originalCurrencyUnit;
let options, exchangeRates;
const select = document.querySelectorAll('select')
async function getExchangeRate(){
let response = await fetch ('https://api.exchangeratesapi.io/latest?base=USD')
let data = await response.json()
const currencyUnits = Object.keys(data.rates)
const rates = data.rates
currencyUnits.map((currency) => {
options += `<option value=${currency}>${currency}</option>`;
originalCurrencySelector.innerHTML = options;
newCurrencyUnitSelector.innerHTML = options;
exchangeRates = rates;
const styleOutputText = () => {
outputText.style.fontWeight = "bold";
outputText.style.fontSize = "30px";
outputText.style.color = "#141878";
spanExchange.style.display = "inline"
document.getElementById("exchange-rate").style.display = "inline";
async function currencyConversion() {
originalCurrencyAmount = currencyAmtSelector.value;
originalCurrencyUnit = originalCurrencySelector.value;
newCurrencyUnit = newCurrencyUnitSelector.value;
if(!originalCurrencyAmount) {
outputText.style.color = "red";
outputText.textContent = `Please enter the currency value to convert.`
const rate1 = exchangeRates[originalCurrencyUnit];
const rate2 = exchangeRates[newCurrencyUnit];
exchangeRate = (rate2/rate1).toFixed(4);
totalAmt = (originalCurrencyAmount * exchangeRate).toFixed(4)
exchangeRateSelector.value = (rate2/rate1).toFixed(4);
outputText.textContent = `${originalCurrencyAmount} ${originalCurrencyUnit} = ${totalAmt} ${newCurrencyUnit}`
//Event Listeners
btnExchange.addEventListener("click", currencyConversion);
  1. Publish the app
    I used github pages to deploy my app by following these steps:
  • Created a repository on github.
  • Pushed my code.
  • From repo settings, published my app using github pages. The html file with name index.html is published as the home page.

Here's my App's source code and the deployed version.