Mini Project - Simple Interest Calculator using HTML CSS JAVASCRIPT
Sridhar Raj P
![Sridhar Raj P]()
Sridhar Raj P
?? On a mission to teach 1 million students | Developer & Mentor | 5,500+ Students ?? | JavaScript | React JS | Redux | Python | Java | Springboot | MySQL | Self-Learner | Problem Solver
Creating a simple interest calculator using HTML, CSS, and JavaScript involves building a form where the user can input the principal amount, the rate of interest, and the time period. When the user clicks a button, the JavaScript code will calculate the simple interest and display the result.
Here is a step-by-step guide to creating this calculator:
1. HTML
Create the structure of the form where users can input the required values.
2. CSS
Style the form to make it look presentable.
领英推è
3. JavaScript
Add the functionality to calculate the simple interest and display the result.
Program Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Interest Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.calculator {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 450px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin: 10px 0 5px;
}
input {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
border: none;
border-radius: 5px;
background: rgb(230, 18, 18);
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background: rgb(163, 4, 4);
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<h1>Simple Interest Calculator</h1>
<form id="interestForm">
<label for="principal">Principal Amount:</label>
<input type="number" id="principal" name="principal" required>
<label for="rate">Rate of Interest (% per year):</label>
<input type="number" id="rate" name="rate" step="0.01" required>
<label for="time">Time (years):</label>
<input type="number" id="time" name="time" required>
<button type="button" onclick="calculateInterest()">Calculate</button>
</form>
<div id="result"></div>
</div>
<script>
function calculateInterest() {
// Get the values from the form
const principal = parseFloat(document.getElementById('principal').value);
const rate = parseFloat(document.getElementById('rate').value);
const time = parseFloat(document.getElementById('time').value);
// Calculate the simple interest
const interest = (principal * rate * time) / 100;
// Display the result
document.getElementById('result').innerText = `Simple Interest: RS - ${interest.toFixed(2)}`;
}
</script>
</body>
</html>