<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chanuks Gelt Calculator</title>
</head>
<body style="text-align: center;font-size: larger; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<h2>Please type the age of the kid in this box!</h2>
<input placeholder="age..." style="font-size: larger; font-family: Verdana, Geneva, Tahoma, sans-serif;" id="age" type="text">
<button style="font-size: larger; font-family: Verdana, Geneva, Tahoma, sans-serif;" onclick="calc()">Calculate!</button>
<div id="divi"></div>
</body>
<script>
const inp = document.getElementById('age');
function calc(){
divi.innerHTML = "";
if (inp.value < 1){
const text = document.createTextNode("Please input a valid number!");
const divi = document.querySelector("#divi");
text.nodeValue = `Please input a valid number!`
divi.appendChild(text); return;
} else {
calcb();
}
function calcb(){
const numb = eval(inp.value);
const total = numb*0.01+numb*0.05+numb*0.10+numb*0.25+numb*0.50+numb*1.00+numb*1.00+numb*2.00+"!";
const text = document.createTextNode(total);
const $ = document.createTextNode("$");
const divi = document.querySelector("#divi");
text.nodeValue = `${total}`
divi.appendChild($);
divi.appendChild(text);
}
}
</script>
</html>