How to Create a Currency Converter in JavaScript

Submitted by razormist on Monday, February 13, 2023 - 22:30.

How to Create a Currency Converter in JavaScript

Introduction

In this tutorial we will create a How to Create a Currency Converter. This tutorial purpose is to teach you how to make a very simple currency converter. This will cover all the basic function that will convert any currency. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system that needed to convert any available currency. I will give my best to provide you the easiest way of creating this program Currency Converter. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display texboxes and buttton. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
        <head>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">How to Create a Currency Converter</h3>
                <hr style="border-top:1px dotted #ccc;">
                <div class="col-md-4">
                        <div class="form-group">
                                <label>Currency</label>
                                <select class="form-control" id="currency">
                                        <option value="Euro">Euro</option>
                                        <option value="Yen">Yen</option>
                                        <option value="Yuan">Yuan</option>
                                        <option value="Dollar">Dollar</option>
                                        <option value="Pound">Pound</option>
                                </select>
                        </div>
                        <div class="form-group">
                                <input type="number" class="form-control" placeholder="Enter amount" id="amount"/>
                        </div>  
                                <button class="btn btn-primary btn-block" style=" margin-top:20px;"onclick="convert();">Convert</button>
                </div>
                <div class="col-md-8">
                        <div class="form-group">
                                <label>Converted</label>
                                <div style="width:100; height:100px; border:1px solid #000; background-color:gray; color:#fff; padding:20px; margin:10px;">
                                        <span id="result" style="font-size:40px;"></span>
                                </div>
                        </div>
                </div>
        </div>
</body>
<script src="script.js"></script>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will convert the currency you use into a new currency value. To do this just copy and write these block of codes inside the text editor and save it as script.js.

function convert(){     
        let amount=document.getElementById("amount").value;
        let currency=document.getElementById("currency").value;
        if(amount == ""){
                alert('Please enter something first');
        }else{
                switch(currency){
                        case "Dollar":
                                let a_dollar=amount * 51.89;
                                let b_dollar=a_dollar.toFixed(2);
                                document.getElementById("result").innerHTML = "&#8369 "+ b_dollar;
                        break;
                        
                        case "Pound":
                                let a_pound=amount * 72.39;
                                let b_pound=a_pound.toFixed(2);
                                document.getElementById("result").innerHTML = "&#8369 "+ b_pound;
                        break;
                        
                        case "Euro":
                                let a_euro=amount * 63.84;
                                let b_euro=a_euro.toFixed(2);
                                document.getElementById("result").innerHTML = "&#8369 "+ b_euro;
                        break;
                        
                        case "Yen":
                                let a_yen=amount * 0.49;
                                let b_yen=a_yen.toFixed(2);
                                document.getElementById("result").innerHTML = "&#8369 "+ b_yen;
                        break;
                        
                        case "Yuan":
                                let a_yuan=amount * 8.20;
                                let b_yuan=a_yuan.toFixed(2);
                                document.getElementById("result").innerHTML = "&#8369 "+ b_yuan;
                        break;
                }
        }
}

The code above is simple we just create only one method and we will call it convert(). This function will convert the currency you choose into a new currency, in my case I use philippine peso as a sample converted currency. We use case statement in order to handle the select tag option for several currency. In order to get your accurate converted currency you need to look for the current value for your currency value in the stock exchange market.

Output:

The How to Create a Currency Converter in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Create a Currency Converter in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

129 views