Menu
<!DOCTYPE html>
<html>
<head>
<title>Goal Calculator</title>
<link rel=”stylesheet” href=”styles.css”>
<script>
function calculate() {
sbal = sbal.toNumber()
goal = goal.toNumber()
exp = exp.toNumber()
accben = accben.toNumber()
var sbal = document.getElementById(‘sbal’).value;
var goal = document.getElementById(‘goal’).value;
var exp = document.getElementById(‘exp’).value;
var accben = document.getElementById(‘accben’).value;
var main = ((goal – (sbal – accben)) / 12 );
var payment = (main + exp).toFixed(2);
document.getElementById(‘payment’).innerHTML = “Weekly Savings = $”+payment;
}
</script>
</head>
<body>
<div class=”wrapper”>
<div class=”contact-form”>
<div class=”input-fields” id=”calculate-form”>
<div class=”drop”>
<label>Time Period</label>
<select id = “myList”>
<option value = “1”>Week</option>
<option value = “2”>Fortnight</option>
<option value = “3”>Year</option>
</select>
</div>
<input id=”sbal” class=”input” type=”number” placeholder=”Starting Balance”>
<input id=”goal” class=”input” type=”number” placeholder=”Overall Goal”>
<input id=”exp” class=”input” type=”number” placeholder=”Expenditure”>
<input id=”accben” class=”input” type=”number” placeholder=”Account Benchmark”>
<h2 id=”payment”></h2>
</div>
</div>
</div>
</div>
<div>
<button class=”btn” id=”footer” onclick=”calculate()”>Submit</button>
</div>
</body>
</html>