How to create currency converter in javascript
Tags: html, css, javascript, beginners
Published: 2021-05-18 14:42:06

***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###
1. How to make a currency converter
2. How to use frankfurter free API
3. 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.
<a href="https://en.wikipedia.org/wiki/Exchange_rate">Click here to Know more</a>

###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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj854r4oaeo8uz6f2s04.jpg)

<a href="https://www.frankfurter.app/docs/">Read more about frankfurter API</a>

First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:#1###
***Add below code inside index.html***

```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.

```css
/*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;
}
```
###Currency converter in javascript video output:###
{% youtube IV23QBgC41U %}


###You may like this also###
1. <a href="https://blog.stackfindover.com/shortcut-keys-of-computer-a-to-z/">Shortcut Keys of Computer A to Z</a>
2. <a href="https://blog.stackfindover.com/how-to-publish-a-website-for-free/">How to publish a website for free</a>