Hello everyone. Welcome to yet another exciting tutorial from Coding Artist. In this tutorial, we will learn to create a simple interest calculator. To build this calculator, we need HTML, CSS and Javascript. If you are a beginner looking for projects to improve your javascript skills, this might be the perfect project for you.
If you are looking for more advanced projects, you should check out this playlist from my youtube channel. For more calculator projects, watch this video compilation. This playlist consists of projects suitable for everyone including javascript beginners to javascript experts. Hence this playlist is suitable for all kinds of javascript learners.
Let us take a look at how this project works. The project consists of three input fields. These input fields enter the principal amount, the rate of interest and the time. The user has an option to select time either in years or in months.
Once the user is done filling the inputs, they have to click the calculate button and we display a series of calculations. These calculations include the principal amount, the total interest and the total amount to be paid.
Video Tutorial:
If you would prefer to learn by coding along to a video tutorial rather than reading this blog post, check out the video here down below. Also, subscribe to my youtube channel for new and exciting tutorials on HTML, CSS and JS. I also post a lot of quizzes and resources on my channel that help you learn better.
Project Folder Structure:
Now, before we move on to the actual coding, let us create the project folder structure. We create a folder called – ‘Simple Interest Calculator’. Inside this folder, we have three files. The first file is index.html which is the HTML document. The next one is style.css which is the stylesheet. Lastly, we have script.js, which is the script file.
HTML:
We start with the HTML code. Firstly copy the code below and paste it into your HTML document. This creates the elements necessary for the layout of our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Interest Calculator</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="input-wrapper">
<div class="wrapper">
<label for="principal">Principal($):</label>
<input type="number" id="principal" value="1000" />
</div>
<div class="wrapper">
<label for="rate">Rate:</label>
<input type="number" id="rate" value="5" />
</div>
</div>
<label for="time">Time:</label>
<div class="time-wrapper">
<input type="number" id="time" value="1" />
<select name="duration" id="duration">
<option value="year">Year</option>
<option value="month">Month</option>
</select>
</div>
<button id="calculate-btn">Calculate</button>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Once we create the elements, we need to style them. For this, we make use of CSS. Now copy the code provided below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#01e26e, #72ffb4);
}
.container {
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 80vw;
max-width: 600px;
min-width: 350px;
padding: 60px 30px;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
label {
display: block;
font-size: 22px;
margin-bottom: 10px;
font-weight: 500;
}
input {
margin-bottom: 20px;
border: none;
font-size: 20px;
border-bottom: 2px solid #585858;
color: #585858;
padding: 2px 15px;
}
input:focus {
outline: none;
border-bottom: 2.4px solid #01e26e;
}
.input-wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}
.input-wrapper input {
width: 100%;
}
.time-wrapper input {
width: 60%;
}
select {
width: 35%;
border: 1px solid #585858;
font-size: 20px;
margin-left: 3%;
padding: 8px 0;
border-radius: 5px;
}
button {
display: block;
background-color: #01e26e;
border: none;
color: #ffffff;
margin: 20px auto 0 auto;
padding: 15px 40px;
font-size: 20px;
border-radius: 5px;
}
#result {
background-color: #c6ffe2;
margin-top: 30px;
color: #585858;
text-align: center;
font-size: 18px;
padding: 20px;
border-radius: 5px;
}
#result div {
margin-bottom: 10px;
}
#result span {
color: #000000;
font-weight: 500;
}
Javascript:
Next, we add logic and functionality to this calculator using Javascript. To do this, we use Javascript. Please copy the code below and paste it into your script file.
let calculateBtn = document.getElementById("calculate-btn");
let result = document.getElementById("result");
let calculate = () => {
let p = Number(document.getElementById("principal").value);
let r = Number(document.getElementById("rate").value);
let t = Number(document.getElementById("time").value);
let duration = document.getElementById("duration").value;
let simpleInterest =
duration == "year" ? (p * r * t) / 100 : (p * r * t) / 1200;
let amount = p + simpleInterest;
result.innerHTML = `<div>Principal Amount: <span>${p.toFixed(2)}</span></div>
<div>Total Interest: <span>${simpleInterest.toFixed(2)}</span></div>
<div>Total Amount: <span>${amount.toFixed(2)}</span></div>`;
};
calculateBtn.addEventListener("click", calculate);
window.addEventListener("load", calculate);
Range Slider With Min And Max Values Using HTML & CSS
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download code button below. If you have any queries, suggestions or feedback, do comment on them below.
Happy Coding!
