HTML code of IAS Calculator
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ISA Calculator</title>
<style>
/* Basic styling for the calculator */
body {
font-family: Arial, sans-serif;
}
.calculator {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
.calculator label {
display: block;
margin-bottom: 10px;
}
.calculator input[type=”number”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.calculator button {
width: 100%;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.calculator button:hover {
background-color: #0056b3;
}
.calculator #result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class=”calculator”>
<h2>ISA Calculator</h2>
<label for=”initial”>Initial Investment (£):</label>
<input type=”number” id=”initial” placeholder=”Enter initial investment”>
<label for=”contribution”>Annual Contribution (£):</label>
<input type=”number” id=”contribution” placeholder=”Enter annual contribution”>
<label for=”years”>Number of Years:</label>
<input type=”number” id=”years” placeholder=”Enter number of years”>
<label for=”interest”>Annual Interest Rate (%):</label>
<input type=”number” id=”interest” placeholder=”Enter annual interest rate”>
<button onclick=”calculate()”>Calculate</button>
<div id=”result”></div>
</div>
<script>
function calculate() {
var initial = parseFloat(document.getElementById(‘initial’).value);
var contribution = parseFloat(document.getElementById(‘contribution’).value);
var years = parseInt(document.getElementById(‘years’).value);
var interest = parseFloat(document.getElementById(‘interest’).value);
var total = initial;
for (var i = 0; i < years; i++) {
total += contribution;
total *= (1 + (interest / 100));
}
document.getElementById(‘result’).innerHTML = “Total value after ” + years + ” years: £” + total.toFixed(2);
}
</script>
</body>
</html>