Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 18, 2021 02:42 pm GMT

How to create currency converter in javascript

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to create a currency converter in JavaScript

Common Query

How to make a currency converter
How to use frankfurter free API
How to create API based application

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 Using JavaScript Step By Step Guide

To make a currency converter in javascript we 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.

Step:#1

Add below code inside index.html

<!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>  <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>  <script>    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];        });    }  </script></body></html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

/*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;}