Javascript Currency Conversion tool using fetch

This is a quick tutorial how to use the fetch command in Javascript to write a currency conversion tools. Using the excellent Api from fixer.io which will get the daily exchange rate.

Below is a link of what we aim to have built by the end of this tutorial.

Preview or Download

HTML

For the HTML we have two inputs with type of number one for the euro and another one for the values in pound. Finally we have a button to submit the conversion.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Currency Converter</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" /> 
    <link rel="stylesheet" href="style/main.css" />
</head>
<body>
    <div class="container">
        <h1>Currency Conversion </h1>
        <p>Enter your amount in Euro to see how much it is Pounds</p>
        <div class="conversionWrapper">
            <div class="inputWrapper">
                <span>€</span>
                <input type="number" name="euro" class="euro" placeholder="0.00" step="0.01" />
            </div><!-- .inputWrapper -->
            <div class="inputWrapper">
                <span>£</span>
                <input type="number" name="pound" class="pound" placeholder="0.00" step="0.01" disabled />
            </div><!-- .inputWrapper -->
            <button class="convertButton">Convert</button>
        </div><!-- .conversionWrapper -->
    </div><!-- .container -->
    <script src="script/main.js"></script>
</body>
</html>

Css

For the background will be using a purple radial gradient. To center the content I be using Flexbox and the properties jusitfy-content and align-center. Flexbox still amazes me how easy it is to center items vertically and horizontally. A few years back to center something vertically would either a css fudge or a Javascript solution.

html{
    background: #614385; /* fallback for old browsers */
    background: radial-gradient(#614385 , #516395); 
    font-family: 'Roboto', sans-serif;
    min-height:100%;    
    display:flex;
    justify-content:center;
    align-items:center;
}

.container{background:#fff; max-width:500px; padding:20px;}

h1{font-size:32px; text-align:center; text-transform:uppercase; color:#614385;font-weight:normal; letter-spacing:-1px;}
p{color:#151F1F; text-align:center;}

input[type="number"]{padding:5px; border-radius:3px; border:1px solid #999; width:90%; margin-bottom:10px; font-size:16px;}
input[type="number"]:focus{border-color:#151F1F;}

.conversionWrapper{width:70%; margin:0 auto;}

.convertButton{text-align:center; margin:10px auto 0; text-transform:uppercase; color:white; background-color:#614385; border:1px solid #614385; border-radius:3px; padding:5px 20px; cursor:pointer; transition: 0.3s background ease-in; display:block;}
.convertButton:hover{background-color:#516395; border-color:#614385;}

Javascript

We first start by setting our const we be using. The first one is the endpoint of Fixer api. The other two is the euro and pound inputs from our HTML.

const endpoint = 'http://api.fixer.io/latest';

const euroField = document.querySelector(".euro");
const poundField = document.querySelector(".pound");

We now going to create two event listeners which will execute our function which we will create shortly. The event listener fires an event if the input changes in the euro field or if the user presses the convert button.

document.querySelector(".convertButton").addEventListener("click", moneyConvert);
euroField.addEventListener("input", moneyConvert);

Finally we going to use the fetch command to get a an up to date exchange value. When using the fetch command the data which is returned is just a response. So we then parse it using the json method. To something which we can use for our script.

fetch(endpoint) 
.then( response => response.json())

We then use the response we just fetched and get the data from it to do our calculation. We create three const the first euroamount gets the exchange rate from the api, the euro const gets the value from the euro input and the last const pound does the calculation and rounds up the numbers to 2 decimal places. We then change the value of the pound input to our calculation we just created.

.then(data => {
    const euroAmount = data.rates.GBP;
    const euro = euroField.value;
    const pound = (euro * euroAmount).toFixed(2);
   poundField.value = pound;
});

All the code we just created we put into a function called moneyConvert.


function moneyConvert(){
    fetch(endpoint) 
    .then( response => response.json())
    .then(data => {
        const euroAmount = data.rates.GBP;
        const euro = euroField.value;
        const pound = (euro * euroAmount).toFixed(2);
        poundField.value = pound;
    });          
}

This completes this quick simple currency conversion tool. It’s meant to be a quick start as there more we could do as converting other currency, caching our results to name but a few.

Javascript Currency Conversion tool using fetch

HTML

Css

Javascript

Leave a comment Cancel reply