Build a Loan Calculator using Next.js
Last Updated :
24 Jul, 2024
The Loan Calculator allows users to determine loan amount, interest rate, and tenure, calculate monthly mortgage payments, total loan payments over tenure, and total interest payable. In this article, we will walk you through the process of building a Loan Calculator using Next.js.
Let's take a look at how our completed project will look:
Technologies Used/Prerequisites
- Introduction to Next
- Next Component
- React Hooks
- NPM or NPX
Approach
It is important to import essential dependÂencies including React's useState, useRef, and useEffect hooks, as well as CSS styles from a module. The core functiÂonality of this calcuÂlator allows users to input specific details regarding their loan such as the loan amount, interest rate, and loan tenurÂe.
As users interact with the app or make changes to their inputs, the appliÂcation will automaÂtically recalÂculate key figures such as the Equated Monthly InstaÂllment (EMI), total interest payable, and total amount to be repaid. To achieve this dynamic updating of values, state managÂement technÂiques utilizing useState are employed. AdditiÂonally, input referÂences are handled using useRef.
Steps to create the NextJS Application
Step 1: Create a new Next.js project using the following command
npx create-next-app loanCalculator
Step 2: Change to the project directory:
cd loanCalculator
Project Structure
Example: In this example, we will see the Loan Calculator App using Next.js
JavaScript
// Filename: index.js
import { useState, useRef, useEffect } from "react";
import styles from "../styles/Home.module.css";
export default function Home() {
const [loanAmount, setLoanAmount] = useState(100000);
const [interestRate, setInterestRate] = useState(9);
// Default value of 12 months
const [loanTenure, setLoanTenure] = useState(12);
const [loanEMI, setLoanEMI] = useState(0);
const [totalInterest, setTotalInterest] = useState(0);
const [totalAmount, setTotalAmount] = useState(0);
const inputRefs = {
loanAmount: useRef(),
interestRate: useRef(),
loanTenure: useRef(),
};
useEffect(() => {
calculateEMI();
}, []);
const handleInputChange = (e) => {
const { name, value } = e.target;
if (
name === "loanAmount" ||
name === "loanTenure" ||
name === "interestRate"
) {
if (name === "loanTenure") {
setLoanTenure(parseInt(value) || 0);
} else if (name === "loanAmount") {
setLoanAmount(parseFloat(value) || 0);
} else if (name === "interestRate") {
setInterestRate(parseFloat(value) || 0);
}
}
};
const calculateEMI = () => {
const emi =
loanAmount *
(interestRate / 12 / 100) *
(Math.pow(
1 + interestRate / 12 / 100,
loanTenure
) /
(Math.pow(
1 + interestRate / 12 / 100,
loanTenure
) -
1));
setLoanEMI(emi);
setTotalAmount(Math.round(loanTenure * emi));
setTotalInterest(
Math.round(loanTenure * emi) - loanAmount
);
updateData();
};
const updateData = () => {
Object.keys(inputRefs).forEach((key) => {
inputRefs[key].current.value = parseFloat(
inputRefs[key].current.value || 0
).toFixed(2);
});
inputRefs.loanAmount.current.value =
loanAmount.toFixed(2);
inputRefs.interestRate.current.value =
interestRate.toFixed(2);
inputRefs.loanTenure.current.value = loanTenure;
};
const handleCalculate = () => {
calculateEMI();
};
return (
<div className={styles.loanCalculator}>
<div className={styles.top}>
<h1 className={styles.heading}>
Geeksforgeeks
</h1>
<h3>Loan Calculator</h3>
<form action="#">
{Object.entries(inputRefs).map(
([key, ref]) => (
<div
key={key}
className={
styles.subContainer
}
>
<div
className={styles.title}
>
{key.replace(
/^\w/,
(c) =>
c.toUpperCase()
)}
</div>
<input
type="text"
name={key}
defaultValue={
key ===
"interestRate"
? interestRate
: key ===
"loanTenure"
? loanTenure
: loanAmount
}
className={styles[key]}
ref={ref}
onChange={
handleInputChange
}
/>
</div>
)
)}
</form>
<button
className={styles.btn}
onClick={handleCalculate}
>
Calculate
</button>
</div>
<div className={styles.finalResult}>
<div className={styles.left}>
<div className={styles.loanEMI}>
<h3>Loan EMI</h3>
<div className={styles.value}>
{Math.round(loanEMI)}
</div>
</div>
<div className={styles.totalInterest}>
<h3>Total Interest Payable</h3>
<div className={styles.value}>
{totalInterest}
</div>
</div>
<div className={styles.totalAmount}>
<h3>Total Amount</h3>
<div className={styles.value}>
{totalAmount}
</div>
</div>
</div>
</div>
</div>
);
}
For styling open Home.module.css file then paste the following code
CSS
/* styles/Home.module.css */
.loanCalculator {
font-family: "Roboto", sans-serif;
width: 80%;
margin: 0 auto;
background: #f0f0f0;
box-shadow: 15px 15px 30px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
color: #333;
overflow: hidden;
margin-top: 5rem;
}
.heading {
color: #1d8a34;
font-size: 32px;
margin: 0;
padding: 24px;
text-align: center;
background: #fff;
}
.top {
background: #fff;
padding: 24px;
text-align: center;
}
.top h3 {
font-size: 24px;
margin: 0;
}
.subContainer {
margin-bottom: 16px;
text-align: left;
}
.subContainer .title {
font-size: 18px;
margin-bottom: 8px;
color: #333;
}
.loanAmount,
.interestRate,
.loanTenure {
font-size: 18px;
padding: 10px;
border-radius: 8px;
width: 100%;
border: 4px solid #ccc;
outline: none;
}
.loanAmount:focus,
.interestRate:focus,
.loanTenure:focus {
border-color: #1d8a34;
}
.finalResult {
background: #fff;
padding: 24px;
text-align: center;
}
.finalResult .value::before {
content: "₹";
font-size: 24px;
font-weight: 400;
margin-right: 6px;
opacity: 1;
}
.finalResult .left {
display: flex;
justify-content: space-around;
}
.left h3 {
font-size: 20px;
margin: 0;
color: #1d8a34;
padding: 10px;
}
.value {
font-size: 32px;
font-weight: 700;
padding: 12px 24px;
border-radius: 8px;
background: #1d8a34;
color: #fff;
min-width: 120px;
}
.btn {
background: #1d8a34;
color: #fff;
border: none;
padding: 15px 20px;
border-radius: 8px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
margin: 20px 0;
transition: background 0.3s;
}
.btn:hover {
background: #155d27;
}
Step 3: To run the next.js application use the following command and then go to this URL http://localhost:3000
npm run dev
Output:
Similar Reads
How to build Love Calculator using Node.js ?
In this article, we are going to create a Love Calculator. A Love Calculator is used to calculate the love percentage between the partners. Functionality: Take User's NameTake User's Partner NameShow the Love PercentageApproach: We are going to use Body Parser by which we can capture user input valu
5 min read
Build a Calculator using React Native
React Native is a well-known technology for developing mobile apps that can run across many platforms. It enables the creation of native mobile apps for iOS and Android from a single codebase. React Native makes it simple to construct vibrant, engaging, and high-performing mobile apps. In this tutor
6 min read
Create a Calculator App Using Next JS
Creating a Calculator app is one of the basic projects that clears the core concept of a technology. In this tutorial, we'll walk you through the process of building a calculator app using Next.js. Output Preview: Let us have a look at how the final output will look like. Prerequisites:NPM & Nod
3 min read
Age Calculator Using React-JS
In this article, we will create an Age Calculator using ReactJS and Bootstrap. This free age calculator computes age in terms of years, months, weeks, days, hours, minutes, and seconds, given a date of birth. Users can now input their birth year and calculate their current age with just a few clicks
4 min read
Build a Calculator with VueJS
We'll learn how to build a simple calculator app using Vue.js. A calculator is a fundamental tool for performing mathematical calculations, and building one using Vue.js is a great way to understand the basics of Vue.js components, data binding, and event handling. Step-by-step guide to set up the p
3 min read
Build a Movie APP Using Next.js
We will create a movie database app using Next.js and an external movie API (such as The Movie Database API). The app will enable users to view movies, search for specific movies, and view detailed information about each movie, including the title, release date, rating, brief description, and a list
7 min read
ReactJS Calculator App (Building UI)
We created our first app and deleted all those files we did not need, and created some of the files that we will need in the future. Now as we stand in our current situation we have a blank canvas before us where we will have to create our calculator app. We will be creating the project in multiple
4 min read
Design a Loan Calculator using JavaScript
The Loan Calculator can be used to calculate the monthly EMI of the loan by taking the total amount, months to repay, and the rate of interest. Formula Used:interest = (amount * (rate * 0.01))/months;total = ((amount/months) + interest);ApproachExtract values from HTML input elements (#amount, #rate
2 min read
GPA Calculator using React
GPA Calculator is an application that provides a user interface for calculating and displaying a student's GPA(Grade Point Average). Using functional components and state management, this program enables users to input course information, including course name, credit hours and earned grades and add
6 min read
Build a Car Rental System Using Next.js
We will build a car rental system using Next.js, a popular React framework that provides server-side rendering and static site generation. This platform will allow users to browse and book vehicles for short-term usage. Output Preview: Let us have a look at how the final output will look like. Prere
9 min read