Currency Converter [ Building Currency Converter in JavaScript ]

Hello Friends, in this article I will teach you How to create currency converter in JavaScript and also i have listed best currency converter examples which are available on CodePen.

What is Currency Converter?

A currency converter is a software, that is designed to convert a currency into another to check its corresponding value. They do so by connecting to a database of current currency exchange value.

Click here to Know more

Currency Converter in JavaScript Step By Step Guide

To make a currency converter using JavaScript we have to use frankfurter API this is an open-source, simple, and lightweight API for current and historical foreign exchange (forex) rates published by the European Central Bank.

Read more about frankfurter API

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css and, main.js) for creating a JavaScript Currency Converter. In the next step, you will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>How to create currency converter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    
   <!-- Add Main.js File -->
   <script src="main.js"></script>
</body>

</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<div class="currency-row-outer">
    <div class="currency-converter">
      <h2>Currency Converter</h2>

      <div class="field grid-50-50">
        <div class="colmun col-left">
          <input type="number" class="form-input" id="number" placeholder="00000">
        </div>
        <div class="colmun col-right">
          <div class="select">
            <select name="currency" class="currency" onchange="updatevalue()"></select>
          </div>
        </div>
      </div>

      <div class="field grid-50-50">
        <div class="colmun col-left">
          <input type="text" class="form-input" id="output" placeholder="00000" disabled>
        </div>
        <div class="colmun col-right">
          <div class="select">
            <select name="currency" class="currency" onchange="updatevalue()"></select>
          </div>
        </div>
      </div>

    </div>
  </div>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

/*Start Currency Converter*/
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}

body {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

.currency-row-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.currency-converter {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

input,
select {
    color: #363636;
    font-size: 1rem;
    height: 2.3em;
    border-radius: 4px;
    max-width: 100%;
    width: calc(100% - 15px);
    margin: auto;
    outline: 0;
    background: #fff;
    border-color: #dbdbdb;
    padding-left: 15px;
    border: 1px solid #00000057;
    box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%);
    -webkit-appearance: none;
}

.field.grid-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

.currency-converter .colmun {
    margin-bottom: 15px;
}

select.currency {
    border-color: #3273dc;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 1em;
    max-width: 100%;
    outline: 0;
    display: block;
}

.currency-converter .select {
    position: relative;
    height: 100%;
}

h2 {
    padding-bottom: 30px;
}

.currency-converter .select:after {
    transform: rotate(-45deg);
    transform-origin: center;
    content: "";
    border: 3px solid rgba(0, 0, 0, 0);
    border-radius: 2px;
    border-top: 0;
    border-right: 0;
    display: block;
    height: 0.525em;
    width: 0.525em;
    z-index: 4;
    position: absolute;
    top: 50%;
    right: 1.125em;
    margin-top: -0.4375em;
}

.select:not(:hover)::after {
    border-color: #3273dc;
}

.select:hover::after {
    border-color: #363636;
}

Step 4 — Adding JavaScript code

In this step, we will add some JavaScript code to build Currency Converter in main.js file

const select = document.querySelectorAll('.currency');
    const number = document.getElementById("number");
    const output = document.getElementById("output");


    fetch('https://api.frankfurter.app/currencies').then((data) => data.json())
      .then((data) => {
        display(data);
      });


    function display(data) {
      const entries = Object.entries(data);
      for (var i = 0; i < entries.length; i++) {
        select[0].innerHTML += `<option value="${entries[i][0]}">${entries[i][0]} : ${entries[i][1]}</option>`;
        select[1].innerHTML += `<option value="${entries[i][0]}">${entries[i][0]} : ${entries[i][1]}</option>`;
      }
    }



    function updatevalue() {
      let currency1 = select[0].value;
      let currency2 = select[1].value;

      let value = number.value;


      if (currency1 != currency2) {
        convert(currency1, currency2, value);
      } else {
        alert("Choose Diffrent Currency");
      }
    }


    function convert(currency1, currency2, value) {
      const host = "api.frankfurter.app";

      fetch(`https://${host}/latest?amount=${value}&from=${currency1}&to=${currency2}`)
        .then((val) => val.json())
        .then((val) => {
          console.log(Object.values(val.rates)[0]);
          output.value = Object.values(val.rates)[0];
        });

    }

#Final Result

if you want to change currency name like [ USD ] to [ Australian Dollar ] than you have to replace this ${entries[i][0]} to ${entries[i][1]} this in [ display ] function.

function display(data) {
   const entries = Object.entries(data);
   for (var i = 0; i < entries.length; i++) {
     select[0].innerHTML += `<option value="${entries[i][0]}">${entries[i][1]}</option>`;
     select[1].innerHTML += `<option value="${entries[i][0]}">${entries[i][1]}</option>`;
   }
}

#Result

Best collection of Currency Converter

In this collection, I have listed best Currency Converter examples which are available on CodePen.

#1 Vue js Currency Converter

Currency Converter in Vue.js, which was developed by Jacob Gibellini. Moreover, you can customize it according to your wish and need.

Author:	Jacob Gibellini
Created on:	September 25, 2017
Made with:	HTML, CSS(SCSS) and JS
Demo Link:	Source Code / Demo
Tags:	Currency Converter in Vue.js

#2 Currency Converter Widget

Simple Currency Converter Widget, which was developed by currencyrate. Moreover, you can customize it according to your wish and need.

Author:	currencyrate
Created on:	February 19, 2018
Made with:	HTML, CSS(SCSS) and JS
Demo Link:	Source Code / Demo
Tags:	Currency Converter Widget

#3 JS Currency Converter

JS Currency Converter, which was developed by Tutul. Moreover, you can customize it according to your wish and need.

Author:	Tutul
Created on:	October 9, 2020
Made with:	HTML, CSS(SCSS) and JS
Demo Link:	Source Code / Demo
Tags:	JS Currency Converter

If you liked this article JavaScript Currency Converter, you should check out this one Binary to Decimal Converter.

We also wrote about similar topics like JavaScript Random Quote Generator, Integrate Webcam using JavaScript and many more.