How to Calculate Simple Interest in HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Interest Calculator</title>
<style>
body{
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg,#74abe2,#5563de);
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 400px;
text-align: center;
}
h2{
margin-bottom: 20px;
color: #222;
}
input{
width: 90%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
button{
background-color: #5563de;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover{
background-color: #3742fa;
}
.result{
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
@media(max-width:480px){
.container{
padding: 20px;
}
input,button{
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="continer">
<h2>Simple Interest Calculator</h2>
<input type="number" id="principal" placeholder="Enter Principal(P)" />
<input type="number" id="rate" placeholder="Enter Rate(%)" />
<input type="number" id="time" placeholder="Enter Time(years)" />
<button onclick="calculateInterest()">Calculate</button>
<div class="result" id="result"></div>
</div>
<script>
function calculateInterest() {
const p = parseFloat(document.getElementById('principal').value);
const r = parseFloat(document.getElementById('rate').value);
const t = parseFloat(document.getElementById('time').value);
const resultEl = document.getElementById('result');
if (isNaN(p) || isNaN(r) || isNaN(t)) {
resultEl.textContent = "⚠️ Please enter valid numbers in all fields.";
return;
}
const si = (p * r * t) / 100;
resultEl.textContent = `Simple Interest = ₹${si.toFixed(2)}`;
}
</script>
</body>
</html>