JavaScript Convert Currency App

This JavaScript code snippet helps you make an app to convert currency. It defines an array of currencies, and selects several DOM elements including form, selects, and result elements using the querySelector method. The render options function is defined to render the list of currency options to the select element. The submitHandler function is defined to handle form submission, checking if amount is inserted, if the selected currencies are not the same, and then makes an API request to get the exchange rate and convert the amount.

The makeHttpRequest function is defined to handle making API requests using XMLHttpRequest. Finally, the renderOptions function is called to render the list of currencies, and the submitHandler function is registered to handle the form submission event.

How to Create JavaScript Convert Currency App

First of all, load the Google Fonts CSS into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">

Create the HTML structure for the currency converter as follows:

<div class="container">
    <h1 class="title">Currency Converter</h1>
    <form>
        <input type="text" id="amount">
        <select name="" id="from">
        </select>
        <select name="" id="to">
        </select>
        <input type="submit" value="Convert Me">
    </form>
    <div class="results">
        <div id="result">
        </div>
        <input id="symbol" type="text" value="EUR" disabled>
    </div>            
</div>

Style the currency converter using the following CSS styles:

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: linear-gradient(to right, #003973, #e5e5be);
}

.container {
    width: 400px;
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
background-color: blue !important;
padding: 20px 30px;
margin-top: 50px;
}

h1.title {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
}

form {
    height: 40px;
    display: flex;
}

input, select {
    border: 1px solid #ccc;
}

#amount {
    max-width: 25%;
    padding: 0 0 0 15px;
}

form select {
    flex: 1;
    padding-left: 8px;
}

form input[type="submit"] {
    flex: 1;

}

/* Result */

.results {
    margin-top: 18px;
    height: 40px;
    display: flex;
}

#result {
    flex: 1 1 auto;
    padding: 0 0 0 15px;
    background: #fff;
    margin: 0px 0 0px 0;
    padding-top: 10px;
}

#symbol {
    max-width: 25%;
    text-align: center;
}

Finally, add the following JavaScript function to activate the currency converter:

const currencies = ["IDR", "USD", "KRW", "GBP"]

const fromSelectEl = document.querySelector('#from')
const toSelectEl = document.querySelector('#to')
const formEl = document.querySelector('form')
const resultEl = document.querySelector('#result')
const symbolEl = document.querySelector('#symbol')

const renderOptions = (options) => {
    options.sort().forEach(curr => {
        const newOption = document.createElement('option')
        newOption.setAttribute('value', curr)
        newOption.textContent = curr
        const clonedOption = newOption.cloneNode(true)
        if(curr === 'IDR') {
            newOption.selected = true
        }
        if(curr === 'USD') {
            clonedOption.selected = true
        }
        fromSelectEl.appendChild(newOption)
        toSelectEl.appendChild(clonedOption)
    })
}

const submitHandler = (e) => {
    e.preventDefault()

    const [amountVal, fromVal, toVal] = [...e.target.elements].map(el => el.value)
    
    if(amountVal === '') {
        return alert('Please insert amount')
    }

    if(fromVal === toVal) {
        return alert('Fun Fact: 1 amount X equals to 1 amount X')
    }    

    makeHttpRequest(`https://api.exchangeratesapi.io/latest?base=${fromVal}&symbols=${toVal}`, (response) => {
        const dataToShow = response.rates[toVal] * amountVal
        resultEl.textContent = dataToShow.toFixed(3)
        symbolEl.value = toVal
    })
}

const makeHttpRequest = (url, callback) => {
    const xhr = new XMLHttpRequest()
    xhr.onload = (res) => {
        if(xhr.status === 200) {
            return callback(JSON.parse(res.target.responseText))            
        } else {
            alert('Probably a server error')
        }        
    }

    xhr.open('GET', url)
    xhr.send()
}

renderOptions(currencies)
formEl.addEventListener('submit', submitHandler)

That’s all! hopefully, you have successfully created a currency converter app in JavaScript. If you have any questions or suggestions, feel free to comment below.