Mini Project - Simple Interest Calculator using HTML BOOTSTRAP 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, Bootstrap, and JavaScript involves using Bootstrap for styling and layout, HTML for the structure, and JavaScript for the functionality.
Here's how to build it:
1. HTML
Create the structure of the form with Bootstrap classes for styling.
领英推荐
2. 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>
<link rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mt-5">
<div class="card-header text-center">
<h2>Simple Interest Calculator</h2>
</div>
<div class="card-body">
<form id="interestForm">
<div class="form-group">
<label for="principal">Principal Amount:</label>
<input type="number" class="form-control" id="principal" name="principal" required>
</div>
<div class="form-group">
<label for="rate">Rate of Interest (% per year):</label>
<input type="number" class="form-control" id="rate" name="rate" step="0.01" required>
</div>
<div class="form-group">
<label for="time">Time (years):</label>
<input type="number" class="form-control" id="time" name="time" required>
</div>
<button type="button" class="btn btn-danger btn-block"
onclick="calculateInterest()">Calculate</button>
</form>
<div id="result" class="mt-4"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<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').innerHTML = `<div class="alert alert-info">Simple Interest: RS - ${interest.toFixed(2)}</div>`;
}
</script>
</body>
</html>