Simple Interest Calculator
Simple interest is a straightforward method of calculating the interest charge on a loan or the growth of an investment. It is calculated on the original principal amount only. This means that the interest earned or paid each period does not compound or get added to the principal for future interest calculations. The formula for simple interest is: Interest = Principal × Rate × Time, where the Rate is usually expressed as an annual percentage and Time is in years.
function calculateSimpleInterest() {
var principal = document.getElementById("principal").value;
var rate = document.getElementById("rate").value;
var time = document.getElementById("time").value;
var resultDiv = document.getElementById("result");
// Clear previous results
resultDiv.innerHTML = "";
// Validate inputs
if (isNaN(principal) || principal === "" ||
isNaN(rate) || rate === "" ||
isNaN(time) || time === "") {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
// Convert rate to decimal
var decimalRate = rate / 100;
// Calculate simple interest
var interest = principal * decimalRate * time;
// Display the result
resultDiv.innerHTML = "
Simple Interest Earned/Paid: $" + interest.toFixed(2) + "";
resultDiv.innerHTML += "
Total Amount (Principal + Interest): $" + (parseFloat(principal) + interest).toFixed(2) + "";
}
.calculator-container {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.calculator-form .form-group {
margin-bottom: 15px;
}
.calculator-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.calculator-form input[type="number"] {
width: calc(100% – 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.calculator-form button {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.calculator-form button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 4px;
text-align: center;
}
.calculator-result p {
margin: 5px 0;
color: #333;
}
.calculator-result strong {
color: #0056b3;
}