How to create a simple Forex converter – JAVASCRIPT
remove_red_eye
13 Views
A Forex (foreign exchange) converter allows users to convert one currency into another using real-time exchange rates. In this tutorial, we’ll build a simple currency converter using JavaScript and HTML.
This is a great beginner-friendly project for practicing DOM manipulation, and asynchronous JavaScript.
Tutorial
Step 1: Create the HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h3>Converter </h3>
<form>
<input type=”number” id=”forex-amount” placeholder=”Enter currency”>
<select id=”forex-rate”>
<option disabled selected value=”select”>select currency</option>
<option value=”3665.301″>USD</option>
<option value=”4635.3835″>GBP</option>
<option value=”4635.3835″>EUR</option>
<option value=”33.3528″>KES</option>
</select>
<input type=”text” id=”forex-ugx” placeholder=”result”>
</form>
</body>
</html>Step 2: Javascript code
document.addEventListener(‘DOMContentLoaded’, function() {
document.getElementById(“forex-amount”).addEventListener(“input”,calculator);
document.getElementById(“forex-rate”).addEventListener(“change”,ChangeCurreny);
function calculator(){
let amount = document.getElementById(“forex-amount”).value;
let rate = document.getElementById(“forex-rate”).value;
if(rate == “select”){
document.getElementById(“forex-ugx”).setAttribute(“placeholder”,”please select currency”);
}else{
let compute = amount * rate;
document.getElementById(“forex-ugx”).value = compute;
}
}
function ChangeCurreny(){
let rate = document.getElementById(“forex-rate”).value;
let amount = document.getElementById(“forex-amount”).value;
let compute = rate * amount;
document.getElementById(“forex-ugx”).value = compute.toFixed(2);
}
let menu = document.querySelectorAll(‘select’);
M.FormSelect.init(menu,{});
});