<div class="MainDiv" style = "width: 500px; margin: 200 auto;">
<div class="container">
<h2>Converter Form (2022)</h2>
<form class="MainForm">
Currency Amount:
<div class="CurrencyAmount">
<input type="number" class="" id="amount"/>
</div>
</br>
Customer:
<div class="Customer">
<input type="text" class="" id="customer"/>
</div>
</br>
Currency: </br>
<div class="form-member" style = "float: left;">
<select class="form-control" id="currency-1" required>
<option>EUR</option>
<option>USD</option>
</select>
</div>
<div class="form-member" style = "float: left;">
<label>   > </label>
<select class="form-control" id="currency-2" required>
<option>EUR</option>
<option>USD</option>
</select>
</div>
</br></br>
<div>
<button class="bton calculate-cur mb-2">Convert</button>
<button class="bton reset mb-R">Reset</button>
</div>
</form>
<div class="result">
<p>
<span class="start-amount"></span>
<span class="base-currency"></span>
<span class="final-result"></span>
<span class="second-currency"></span>
</p>
</div>
</div>
<!--
* (1 EUR = 0.84 USD is used in this example)
<p><img src="kurs.jpg" width="80%" title="" /></p>
-->
</div>
<script>
// Assumptions
var assumptions = {'EUR': {'USD': 0.84}, 'USD': {'EUR': 1.2}}
// Get Button Elements
var bton = document.querySelector('.calculate-cur');
// Get Inputs
var firstCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
// Vars to show results
var showAmount = document.querySelector('.start-amount');
var showBase = document.querySelector('.base-currency');
var showSecond = document.querySelector('.second-currency');
var showResult = document.querySelector('.final-result');
function convertCurrency(event)
{
event.preventDefault();
// Assign Values
var amount = amountInput.value;
var first = firstCurrencyInput.value;
var second = secondCurrencyInput.value;
var result = 0;
try {
// Case we don't need to calculate. When USD to USD
if (first == second){
result = amount;
}
// Calculate result based on assumption value
else {
result = amount * assumptions[first][second];
}
}
catch(err) {
result = amount * (1 / assumptions[second][first]);
}
// Show results
showAmount.innerHTML = amount;
showBase.textContent = first + ' = ';
showSecond.textContent = second;
showResult.textContent = result;
}
bton.addEventListener('click', convertCurrency);
</script>