Build a Currency Converter Web Application in Javascript With Full Source Code

Build a Currency Converter Web Application in Javascript With Full Source Code

Hi Friends In this blog post we will be building a complete Currency Converter Web Application in Javascript & jQuery and Boostrap. I will be guiding you step by step.

LIVE DEMO

 

This is the pic of the project we will be building in this blog post. We will be having base currency and its value and target currency and its value to convert back and forth.

 

Practical Video

 

<!DOCTYPE html>
<html>
    <head>
        <title>Currency Converter in Javascript</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <br><br>
            <h1 style="text-align: center;">Currency Converter</h1>
            <form id="myForm">
                <br><br>
                <label for="Base Currency">Base Currency</label>
                <select class="form-control" id="base">
                    <option>USD</option>
                    <option>HKD</option>
                    <option>ISK</option>
                    <option>PHP</option>
                    <option>DKK</option>
                    <option>HUF</option>
                    <option>CZK</option>
                    <option>GBP</option>
                    <option>RON</option>
                    <option>SEK</option>
                    <option>IDR</option>
                    <option>INR</option>
                    <option>BRL</option>
                    <option>RUB</option>
                    <option>HRK</option>
                    <option>JPY</option>
                    <option>THB</option>
                    <option>CHF</option>
                    <option>EUR</option>
                    <option>MYR</option>
                    <option>BGN</option>
                    <option>TRY</option>
                    <option>CNY</option>
                    <option>NOK</option>
                    <option>NZD</option>
                    <option>ZAR</option>
                    <option>CAD</option>
                    <option>MXN</option>
                    <option>SGD</option>
                    <option>AUD</option>
                    <option>ILS</option>
                    <option>KRW</option>
                    <option>PLN</option>
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="baseNumber" value="1">
                </div>
                <label for="Target Currency">Target Currency</label>
                <select class="form-control" id="target">
                    <option>INR</option>
                    <option>HKD</option>
                    <option>ISK</option>
                    <option>PHP</option>
                    <option>DKK</option>
                    <option>HUF</option>
                    <option>CZK</option>
                    <option>GBP</option>
                    <option>RON</option>
                    <option>SEK</option>
                    <option>IDR</option>
                    <option>CAD</option>
                    <option>BRL</option>
                    <option>RUB</option>
                    <option>HRK</option>
                    <option>JPY</option>
                    <option>THB</option>
                    <option>CHF</option>
                    <option>EUR</option>
                    <option>MYR</option>
                    <option>BGN</option>
                    <option>TRY</option>
                    <option>CNY</option>
                    <option>NOK</option>
                    <option>NZD</option>
                    <option>ZAR</option>
                    <option>USD</option>
                    <option>MXN</option>
                    <option>SGD</option>
                    <option>AUD</option>
                    <option>ILS</option>
                    <option>KRW</option>
                    <option>PLN</option>
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="targetNumber">
                </div>
            </form>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="script.js"></script>
</html>

 

See also  Node.js FFMPEG Colorful Progressbar CLI ffmpeg-progressbar-cli Library Full Tutorial and Setup 2020

Now we will write the Javascript Code

 

$(document).ready(function () {
  // some variables

  var baseCurrency = 'USD';

  var baseNumber = 1;

  var targetCurrency = 'INR';

  var targetNumber;

  var url;

  currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)

  // get base currency value

  $("#base").change(function () {
    // base currency

    baseCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)


  });

  // get base currency number

  $("#baseNumber").change(function(){

    // base number

    baseNumber = $(this).val()

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })

  // get target currency value

  $("#target").change(function () {
    // target currency

    targetCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  });

  // get target currency number

  $("#targetNumber").change(function(){

    // target number

    targetNumber = $(this).val()

    // call currencyConverter function

    currencyConverter2(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })


  // function to convert BaseCurrency to TargetCurrency

  function currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://api.exchangeratesapi.io/latest?symbols="+targetCurrency+"&base="+baseCurrency

      // make a get request to api

    

      $.get(url,function(data){
          console.log(data.rates)

          for (let [key, value] of Object.entries(data.rates)) {
            
            var result = value * baseNumber

           $("#targetNumber").val(result)

          }
          console.log(`data.rates.${targetCurrency}`)
      })
  }

  function currencyConverter2(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://api.exchangeratesapi.io/latest?symbols="+baseCurrency+"&base="+targetCurrency

      // make a get request to api

      $.get(url,function(data){
          console.log(data.rates)

          for (let [key, value] of Object.entries(data.rates)) {

            console.log(value)
            
            var result = value * targetNumber

           $("#baseNumber").val(result)

          }
          console.log(`data.rates.${targetCurrency}`)
      })
  }


});

Leave a Reply