Build a Currency Converter in JavaScript

Today in this blog you’ll learn how to Build a Currency Converter in JavaScript.

You can convert any currency to another currency using this Currency Converter, which we build using JavaScript

Build a Currency Converter in JavaScript [Source Codes]

This source code can help you to Build a Currency Converter in JavaScript

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
    <h1>Currency Converter</h1>
    <div class="row">
      <div class="col">
        <select name="currency" class="currency"> 
        	<option>select</option>
        </select>
        <input type="text" name="" id="input_currency">
      </div>
      <div class="col">
        <select name="currency" class="currency">
        	<option>select</option>
        </select>
        <input type="text" name="" id="output_currency" disabled>
      </div>
    </div>
    <button onClick="convert()">Convert</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: linear-gradient(to right bottom, #007673, #0e0066);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.container{
	width: 600px;
}
h1{
	font-size: 60px;
	text-align: center;
}
.row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.col{
	width: 48%;
}
select,
input{
	width: 100%;
	margin-bottom: 15px;
	font-size: 20px;
	padding:8px 15px;
	font-weight: 700
}
input{
	width: 100%;
	padding: 10px 15px;
}
button{
	width: 200px;
	display: block;
	padding: 10px;
	text-align: center;
	margin:0 auto;
	font-size: 22px;
	border-radius: 15px;
	background-color: #e62e00;
	color: #fff;
	border:0;
	cursor: pointer;
}

JavaScript Code

Copy

var select = document.querySelectorAll(".currency"),
input_currency = document.getElementById('input_currency'),
output_currency = document.getElementById('output_currency');

fetch(`https://api.frankfurter.app/currencies`)
  .then((data) => data.json())
  .then((data) => {
    const entries = Object.entries(data);
    console.log(data)
	  for (var i = 0; i < entries.length; i++) {
	    select[0].innerHTML += `<option value="${entries[i][0]}">${entries[i][0]}</option>`;
	    select[1].innerHTML += `<option value="${entries[i][0]}">${entries[i][0]}</option>`;
	  }
   	
});

function convert(){
 	input_currency_val = input_currency.value;
 	if(select[0].value != select[1].value ){
 		alert("yes")
 		const host = 'api.frankfurter.app';
		fetch(`https://${host}/latest?amount=${input_currency_val}&from=${select[0].value}&to=${select[1].value}`)
		  .then((val) => val.json())
    	.then((val) => {
		    //alert(`10 GBP = ${data.rates.USD} USD`);
		    output_currency.value = Object.values(val.rates)[0]
		    console.log(Object.values(val.rates)[0])
		});
 	}else{
 		alert("Peease select two different currencies")
 	}
}