Add JavaScript code to DollarConvert.html WHERE IT SAYS \"// Add your code here\
ID: 3827222 • Letter: A
Question
Add JavaScript code to DollarConvert.html WHERE IT SAYS "// Add your code here" so it converts an amount in dollar to another currency. In particular, the converted amount should be updated as the user types the dollar amount, and it should also be updated whenever the user selects a different currency.
HINT:
Add event handlers to the keyup event of the input field and the change event of the dropdown list.
.val() can be used on a <select> element to get the value of the selected option.
DollarConvert.html, the code to be modified:
-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dollar Converter</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var rates = {
"EUR" : 0.934,
"GBP" : 0.791,
"INR" : 64.659,
"AUD" : 1.326
};
$(function(){
// Add your code here
});
</script>
</head>
<body>
<input type="text" name="dollar" value="0" /> Dollar = <span id="amount">0</span>
<select id="currency">
<option>EUR</option>
<option>GBP</option>
<option>INR</option>
<option>AUD</option>
</select>
</body>
</html>
Only code where the comment is marked, changing anything else is not allowed.
Explanation / Answer
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dollar Converter</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var rates = {
"EUR" : 0.934,
"GBP" : 0.791,
"INR" : 64.659,
"AUD" : 1.326
};
$(function(){
// Add your code here
convertCurrecy();
});
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
console.log(charCode);
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
alert('Numbers only allowed to type');
return false;
}
return true;
}
function convertCurrecy(){
var amt = document.getElementById('dollar').value;
var currId = document.getElementById('currency').value;
var convertAmt = amt * rates[currId];
document.getElementById("amount").innerHTML = convertAmt;
return true;
}
</script>
</head>
<body>
<input type="text" name="dollar" id="dollar" value="0" /> Dollar = <span id="amount">0</span>
<select id="currency">
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
<option value="AUD">AUD</option>
</select>
</body>
</html>
Note:
.val() can be used on a <select> element to get the value of the selected option.
.val() can be used only for jquery not in javascript. document.getElementById('dollar').value; this would be used to get the value of selected option.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.