×

Making a simple JPY-SGD currency conversion calculator with Javascript

By  on December 1, 2018

In this quick exercise, we will make a really simple Japanese Yen to Singapore Dollar conversion calculator using Javascript. Of course, it’ll work for any other two currencies that you’ll want to modify it for. This calculator can come in really handy when you are shopping in an overseas merchandise store during a vacation and needed a quick way to convert the Japanese Yen into your local currency. In my case, the local currency is Singapore Dollar.

You’ll only need some basic experience with HTML, CSS and Javascript to follow along. Let’s get started!

First, open your favourite text editor and create an calculator.html page. Save it on your desktop or wherever else you like. This will be the HTML base page to hold the calculator. Copy and paste the code below into your page and save the file.


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="INDEX, FOLLOW" />
  <meta name="theme-color" content="#333333">
  <title>JPY-SGD Calculator</title>

<!-- calculator style goes here -->

</head>
<body>
<div class="main">

<!-- calculator HTML form goes here -->
<!-- calculator Javascript goes here -->

</div>
</body>
</html>

This is pretty much it for the base page. Take note of the HTML comments on the page. These are placeholders where we’ll be replacing with the calculator style, HTML form and Javascript in the next few steps!

Next, we’ll write the calculator’s HTML form, which comprises a text box for you to enter the Japanese Yen and a label to hold the corresponding converted Singapore Dollar amount. We’ll define some CSS classes on the HTML elements so that we can style them with CSS later.


  <form>
    <span class="curr-label">JPY</span>
    <input type="number" id="jpy">
    <div class="clear50"></div>
    <span class="iseq">equals</span>
    <div class="clear50"></div>
    <span class="curr-label">SGD</span>
    <span class="curr-amt"> _</span>       
  </form>

That’s it for the form. You can copy and paste the above code and replace the comment line that says “<!– calculator HTML form goes here –>”

At this time, the calculator page looks kind of raw. But don’t worry, we’ll make it look prettier with the CSS styles next. To keep things simple, we’ll be using a minimalistic dark theme for the calculator. Copy and paste the code below and replace the comment line that says “<!– calculator style goes here –>”.


  <style>
    body{
      background: #000000; 
      color:#fafafa;
    }
    .clear50{
      clear:both;
      height:50px;
    }
    .main{
      padding-top:20px;
      margin:auto;
      width:100%;
      max-width:300px;
    }
    .curr-label{
      float: left;
      color:#fafefa;
      font-size:3em;
    }
    .iseq{
      color:#e4a60f;
      font-size:2em;
    }
    .curr-amt{
      color: #a07919;
      font-size: 3em;
      display: block;
      margin-left: 10px;
      float: left;
    }    
    form #jpy{
      float: left;
      padding: 4px 3px;
      margin-top: 10px;
      margin-left: 20px;
      width: 180px;
      font-size: 20px;
      color: #a07919;
    }
    h2{
      font-size:4em;
      color:#fafafa;
      margin-top:100px;
    }
  </style>

Save and refresh the calculator.html page in your browser. Looks much better!

Now, we’ll need a simple piece of Javascript that will perform the currency conversion based on a pre-defined exchange rate. We’ll be assuming the exchange rate to be 82, which means 1 Singapore Dollar (SGD) equals 82 Japanese Yen (JPY).

For the user interactions and experience, we will take care of two things.

  1. When the user loads the calculator page, we’ll put the cursor in the text box so that he/she can enter an input right away.
  2. As the user types in a number, we’ll do the math for the exchange rate conversion immediately (based on the pre-defined exchange rate of 82) and update the screen dynamically with the calculated results.

For simplicity, we’ll use the jQuery Javascript library to handle the user interactions and update the HTML.
Copy and paste the code below and replace the comment line that says “<!– calculator Javascript goes here –>”.


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  var exr = 82;
  $('#jpy').focus().keyup(function(){
    if ($(this).val() > 0){
      var tgt_amt = (Math.round(($(this).val()) / exr * 100) / 100).toFixed(2);
      $('.curr-amt').html(tgt_amt);
    }else{
      $('.curr-amt').html(' _');
    }
  });
</script>

That’s it! Check out a sample of the calculator here.



Posted in: ,

Leave a Reply

Your email address will not be published. Required fields are marked *