How would I create a currency converter with javascript?

Question

I'm trying to build a currency converter. I'm using javascript and I have a good foundation but I want to know how to make the converter update in real-time without having to click a button.

How do I make it so that my converter converts from a base currency of M without needing be be within a select element & how do I make the converter update as the user types the number in, rather than having to click a button?

I've tried removing all of the available options for the .currency-1 class and only leaving M, but that still leaves a drop down menu. I want to convert from M to X (USD, GBP, CAD, EUR, etc.)

 var crrncy = { 'M': { 'USD': 0.80, 'GBP': 0.65, 'EUR': 0.77, 'CAD': 0.95, 'M': 1 }, }; var btn = document.querySelector('.calculate-btn'); var baseCurrencyInput = document.getElementById('currency-1'); var secondCurrencyInput = document.getElementById('currency-2'); var amountInput = document.getElementById('amount'); var toShowAmount = document.querySelector('.given-amount'); var toShowBase = document.querySelector('.base-currency'); var toShowSecond = document.querySelector('.second-currency'); var toShowResult = document.querySelector('.final-result'); function convertCurrency(event) { event.preventDefault(); var amount = amountInput.value; var from = baseCurrencyInput.value; var to = secondCurrencyInput.value; var result = 0; try{ if (from == to){ result = amount; } else { result = amount * crrncy[from][to]; } } catch(err) { result = amount * (1 / crrncy[to][from]); } toShowAmount.innerHTML = amount; toShowBase.textContent = from + ' = '; toShowSecond.textContent = to; toShowResult.textContent = result; } btn.addEventListener('click', convertCurrency); 

 <div class="jumbotron"> <div class="container"> <form class="form-inline"> <div class="form-group mb-2"> <input type="number" class="form-control" id="amount"/> </div> <div class="form-group mx-sm-3 mb-2"> <select class="form-control" id="currency-1" required> <option>M</option> </select> </div> <div class="form-group mx-sm-3 mb-2"> <select class="form-control" id="currency-2" required> <option>USD</option> <option>GBP</option> <option>EUR</option> <option>CAD</option> </select> </div> <button class="btn calculate-btn btn-primary mb-2">Sum</button> </form> <div class="result"> <p> <span class="given-amount"></span> <span class="base-currency"></span> <span class="final-result"></span> <span class="second-currency"></span> </p> </div> </div> </div> 

Any help would be appreciated!

I need the user to be able to input X amount (in currency M, no dropdown), select their native currency & have the page calculate the rate as soon as they type in the number.

Answer 1

Add another eventListner which is keyup so that whenever user types in the required field, it will call the convertCurrency function as below:

amountInput.addEventListener('keyup', convertCurrency);

Edit:

To remove the selection box for M , remove the select element and replace by either <p> or <span> tag. After this, you would have to get the this value by using innerText as var from = baseCurrencyInput.innerText; in the currency converter function.

 var crrncy = { 'M': { 'USD': 0.80, 'GBP': 0.65, 'EUR': 0.77, 'CAD': 0.95, 'M': 1 }, } var btn = document.querySelector('.calculate-btn'); var baseCurrencyInput = document.getElementById('currency-1'); var secondCurrencyInput = document.getElementById('currency-2'); var amountInput = document.getElementById('amount'); var toShowAmount = document.querySelector('.given-amount'); var toShowBase = document.querySelector('.base-currency'); var toShowSecond = document.querySelector('.second-currency'); var toShowResult = document.querySelector('.final-result'); function convertCurrency(event) { event.preventDefault(); var amount = amountInput.value; var from = baseCurrencyInput.innerText; var to = secondCurrencyInput.value; var result = 0; try { if (from == to) { result = amount; } else { result = amount * crrncy[from][to]; } } catch (err) { result = amount * (1 / crrncy[to][from]); } toShowAmount.innerHTML = amount; toShowBase.textContent = from + ' = '; toShowSecond.textContent = to; toShowResult.textContent = result; } btn.addEventListener('click', convertCurrency); amountInput.addEventListener('keyup', convertCurrency); 

 <div class="jumbotron"> <div class="container"> <form class="form-inline"> <div class="form-group mb-2"> <input type="number" class="form-control" id="amount"/> </div> <div class="form-group mx-sm-3 mb-2"> <p id="currency-1">M</p> </div> <div class="form-group mx-sm-3 mb-2"> <select class="form-control" id="currency-2" required> <option>USD</option> <option>GBP</option> <option>EUR</option> <option>CAD</option> </select> </div> <button class="btn calculate-btn btn-primary mb-2">Sum</button> </form> <div class="result"> <p> <span class="given-amount"></span> <span class="base-currency"></span> <span class="final-result"></span> <span class="second-currency"></span> </p> </div> </div> </div> 

Answer 2

 var crrncy = { 'M': { 'USD': 0.80, 'GBP': 0.65, 'EUR': 0.77, 'CAD': 0.95, 'M': 1 }, }; var btn = document.querySelector('.calculate-btn'); var baseCurrencyInput = document.getElementById('currency-1'); var secondCurrencyInput = document.getElementById('currency-2'); var amountInput = document.getElementById('amount'); var toShowAmount = document.querySelector('.given-amount'); var toShowBase = document.querySelector('.base-currency'); var toShowSecond = document.querySelector('.second-currency'); var toShowResult = document.querySelector('.final-result'); function convertCurrency(event) { event.preventDefault(); var amount = amountInput.value; var from = baseCurrencyInput.value; var to = secondCurrencyInput.value; var result = 0; try{ if (from == to){ result = amount; } else { result = amount * crrncy[from][to]; } } catch(err) { result = amount * (1 / crrncy[to][from]); } toShowAmount.innerHTML = amount; toShowBase.textContent = from + ' = '; toShowSecond.textContent = to; toShowResult.textContent = result; } btn.addEventListener('click', convertCurrency); $('#amount').keyup(function(event){ convertCurrency(event); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="jumbotron"> <div class="container"> <form class="form-inline"> <div class="form-group mb-2"> <input type="number" class="form-control" id="amount"/> </div> <div class="form-group mx-sm-3 mb-2"> <select class="form-control" id="currency-1" required> <option>M</option> </select> </div> <div class="form-group mx-sm-3 mb-2"> <select class="form-control" id="currency-2" required> <option>USD</option> <option>GBP</option> <option>EUR</option> <option>CAD</option> </select> </div> <button class="btn calculate-btn btn-primary mb-2">Sum</button> </form> <div class="result"> <p> <span class="given-amount"></span> <span class="base-currency"></span> <span class="final-result"></span> <span class="second-currency"></span> </p> </div> </div> </div>