Introduction:
In a simple interest calculator, we simply need to input the principle, rate, and time from the user. After getting all the information from the user, we need to calculate the simple interest by using the formula [(p*t*r)/100] and print the final result. Making a simple interest calculator from HTML, CSS, and JavaScript is very easy. We are making this calculator as below. So, let's begin with the code.
HTML:
Firstly, we are starting with HTML by making the layout of the calculator. The code is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to the simple interest calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Principle:</h2><input type="number" name="principle"
id="principle" placeholder="enter the principle" />
<h2>Rate:</h2><input type="number" name="rate"
id="rate" placeholder="enter the rate" />
<h2>time:</h2><input type="number" name="time"
id="time" placeholder="enter the time" /><br>
<button onclick="simpleinterest()">Calculate</button>
<h2 id="output"></h2>
</div>
</body>
<script src="script.js"></script>
</html>
CSS:
Secondly, We will start making it's appearance better by designing it with some CSS. The code is given below:
* {
margin: 0;
padding: 0;
}
.container {
width: 270px;
height: 270px;
margin: auto;
margin-top: 150px;
background-color: rgb(228, 176, 176);
border: 5px solid rgb(228, 176, 176);
border-radius: 10px;
}
.container h2 {
color: green;
font-family: verdana;
font-size: large;
}
.container input {
color: green;
font-family: verdana;
font-size: large;
}
.container button {
background-color: white;
color: green;
border: 3px solid white;
cursor: pointer;
}
JavaScript:
At last, We are using logic in our program to perform the calculation with the help of JavaScript.The code is given below:
function simpleinterest(){
let pri = document.getElementById('principle').value;
let rate = document.getElementById('rate').value;
let time = document.getElementById('time').value;
let si = (pri*rate*time)/100;
document.getElementById('output').innerHTML =`
Principle: ${pri}<br>
Rate: ${rate}<br>
Time: ${time}<br>
Simple Interest: ${si}<br>`
}
Any Problem
ReplyDelete