Loan Calculator using HTML, CSS & JavaScript - Coding Torque

byPiyush Patil -
0

 

Loan calculator using javascript - coding torque

Loan Calculator using JavaScript

Hello Guys! In this blog, I'm going to explain to you how to create Loan calculator using JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover the HTML part

HTML is a markup language. We use HTML to make the skeleton of a website.

Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website. 

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />


Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in head tag. 

<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">


Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains the <h1> tag for the heading. Then form-input div which has inputs that are loan amount, percentage, interest rate, and months of repayment.


Next we have calculate button which have onclick attribute with calculateLoan() function 

<div class="card">
    <div class="sliders">
        <label for="red">Red</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="red">
        <label for="green">Green</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="green">
        <label for="blue">Blue</label>
        <input type="range" min="0" max="255" value="0" oninput="generateRGBA()" id="blue">
        <label for="alpha">Aplha</label>
        <input type="range" min="0.1" max="1.0" step="0.1" value="1" oninput="generateRGBA()" id="alpha">
    </div>
    <div class="output-box">
        <div class="output" id="output">rgba(0,0,0,1)</div>
        <div class="copy-btn" onclick="copy()"><i class="fas fa-copy"></i></div>
    </div>
</div>

Here is the Final HTML Code 

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Loan Calculator - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <h1>Loan Calculator</h1>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-dollar-sign"></i></button>
            <input type="number" class="input" id="amount" placeholder="Loan Amount">
        </div>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-percentage"></i></button>
            <input type="number" class="input" id="interest" placeholder="Interest">
        </div>
        <div class="form-input">
            <button class="input-icon"><i class="fas fa-calendar"></i></button>
            <input type="number" class="input" id="months" placeholder="Months to repay">
        </div>

        <button class="calculateBtn" onclick="calculateLoan()">Calculate</button>

        <div id="result"></div>
    </div>
</body>

</html>

Output Till Now

HTML output of loan calculator

Let's understand CSS Part

In the below CSS code,

  1. We declare a * selectors to set the font Poppins that we have imported in our head tag.
  2. Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
  3. Next we have container with border deepskyblue and border-radius for curve edges to improve UI. 
* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid deepskyblue;
    padding: 40px;
    border-radius: 20px;
    width: 30rem;
}

.form-input {
    border: 2px solid deepskyblue;
    width: 14rem;
    height: 2rem;
    background: white;
    border-radius: 5px;
    margin: 5px 0;
}

.input {
    height: 100%;
    width: 80%;
    border: none;
    outline: none;
    padding: 0 10px;
}

.input-icon {
    width: 15%;
    height: 100%;
    border: none;
    cursor: pointer;
}

.calculateBtn {
    height: 3rem;
    width: 8rem;
    border: 2px solid deepskyblue;
    background: deepskyblue;
    color: white;
    font-size: 16px;
    border-radius: 7px;
    padding: 8px;
    margin-top: 10px;
    cursor: pointer;
}


Output Till Now

CSS output of loan calculator using js

Finally a JavaScript Part

In the below javascript code, we have calculateLoan() arrow function.

In calculateLoan() function we have declared 3 variables that are amount, interest, and months and then grab their respective values from the input. Next, we have monthlyPayment, totalInterest and totalPayment variable with a formula to calculate. Next, we set the result using DOM Manipulation. 

const calculateLoan = () => {
    let amount = document.getElementById("amount").value;
    let interest = document.getElementById("interest").value;
    let months = document.getElementById("months").value;
    
    let monthlyPayment = ((amount / months) + interest);
    let totalInterest = (amount * (interest * 0.01)) / months;
    let totalPayment = parseFloat(amount) + parseFloat(totalInterest);
    
    document.getElementById("result").innerHTML = `
                    <h2>Results : </h2>
                    <h4>Total payment : ${parseFloat(totalPayment).toFixed(2)}</h4> 
                    <h4>Monthly Payment : ${parseFloat(monthlyPayment).toFixed(2)}</h4>
                    <h4>Total Interest : ${parseFloat(totalInterest).toFixed(2)}</h4>`;
}


Final Output





If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post