Create a GPA Calculator using React Native

Mortgage Calculator using React

Last Updated : 24 Jul, 2024

In this article, we will create a Mortgage Calculator using React, allowing users to estimate their monthly mortgage payments based on the loan amount, annual rate of interest, and loan term in years. The application provides instant feedback, displaying the calculated monthly payment, total payable amount, and total interest.
The application uses React's useState hook to manage state variables for the principal amount, annual interest rate, loan term, monthly payment, total payable amount, total interest, and error handling. Users are prompted to input the necessary information, with real-time validation to ensure accurate calculations.

Preview:

Screenshot-(188)

Pre-requisites:

Project Structure:

Screenshot-(129)

Steps to Create the Project:

Step 1: Set up React project using the command

npx create-react-app <<name of project>>

Step 2: Navigate to the project folder using

cd <<Name_of_project>>

Step 3: Create MortgageCalculator.js component along with its CSS file.

Approach

First use React's 'useState' hook for managing component state, handling variables like loan amount, interest rate, and error messages.
The `calculateMonthlyPayment` function solves mortgage details based on user input, ensuring valid values before performing calculations.
Features input fields for loan details and a button triggering the calculation, with results displayed if the input is valid.
Connects input fields to state variables using `value` and `onChange`, ensuring real-time updates, and triggers calculations on the "Calculate" button click.
App component includes MortgageCalculator, rendering a simple layout with a header and the mortgage calculator below, with imported CSS for styling.

Example: In this example we will see the implementation of above approach. add the below code in respective files.

CSS

/* MortgageCalculator.css */
.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.main-cont {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.label label {
  font-size: 16px;
  color: #555;
  margin-bottom: 5px;
}

.label input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.label button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

.label button:hover {
  background-color: #0056b3;
}

.res {
  text-align: center;
  margin-top: 20px;
  color: #333;
}

JavaScript

// App.js
import React from 'react';
import './App.css';
import MortgageCalculator from './MortgageCalculator';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MortgageCalculator></MortgageCalculator>
      </header>
    </div>
  );
}

export default App;

JavaScript

import React, { useState } from 'react';
import './MortgageCalculator.css';

const MortgageCalculator = () => {
  const [amount, setAmount] = useState('');
  const [interestRate, setInterestRate] = useState('');
  const [loanTerm, setLoanTerm] = useState('');
  const [downPayment, setDownPayment] = useState('');
  const [monthlyPayment, setMonthlyPayment] = useState(null);
  const [totalPayable, setTotalPayable] = useState(null);
  const [totalInterest, setTotalInterest] = useState(null);
  const [error, setError] = useState('');

  const calculateMonthlyPayment = () => {
    if (!amount || !interestRate || !loanTerm) {
      setError('Please fill in all fields.');
      alert('Please fill all the fields !!!');
      setMonthlyPayment('');
      return;
    }

    const loanAmount = parseFloat(amount) - (downPayment ? parseFloat(downPayment) : 0);
    const r = parseFloat(interestRate) / 100 / 12;
    const n = parseFloat(loanTerm) * 12;

    const numerator = loanAmount * r * Math.pow(1 + r, n);
    const denominator = Math.pow(1 + r, n) - 1;
    const monthlyPayment = (numerator / denominator).toFixed(2);

    setMonthlyPayment(monthlyPayment);
    const totalPayable = (monthlyPayment * n).toFixed(2);
    setTotalPayable(totalPayable);
    const totalInterest = (totalPayable - loanAmount).toFixed(2);
    setTotalInterest(totalInterest);
    setError('');
  };

  return (
    <div className='container'>
      <h1>Mortgage Calculator</h1>
      <div className='main-cont'>
        <div className='label'>
          <label>
            Loan Amount (₹):
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder='Amount'
            />
          </label>
        </div>
        <div className='label'>
          <label>
            Down Payment (₹):
            <input
              type="number"
              value={downPayment}
              onChange={(e) => setDownPayment(e.target.value)}
              placeholder='Down Payment'
            />
          </label>
        </div>
        <div className='label'>
          <label>
            Rate of Interest (%):
            <input
              type="number"
              value={interestRate}
              onChange={(e) => setInterestRate(e.target.value)}
              placeholder='Annual Interest Rate'
            />
          </label>
        </div>
        <div className='label'>
          <label>
            Loan Term (years):
            <input
              type="number"
              value={loanTerm}
              onChange={(e) => setLoanTerm(e.target.value)}
              placeholder='Loan Term'
            />
          </label>
        </div>
        <div className='label'>
          <button onClick={calculateMonthlyPayment}>Calculate</button>
        </div>
        {error && <h3 className='res'>{error}</h3>}
        {monthlyPayment && (
          <div className='res'>
            <h3>Monthly Payment: ₹ {monthlyPayment}</h3>
            <h3>Total Loan Payment: ₹ {totalPayable}</h3>
            <h3>Total Interest Amount: ₹ {totalInterest}</h3>
          </div>
        )}
      </div>
    </div>
  );
};

export default MortgageCalculator;

Steps to run the application:

Step 1: Type the following command in terminal

npm start

Step 2: Open web-browser and type the following URL

http://localhost:3000/

Output:

Create a GPA Calculator using React Native

S

strikeackr

Improve

Article Tags :

Similar Reads

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

Tip Calculator using React

In this article, we will create a Tip Calculator using ReactJS. This project basically implements functional components and manages the state accordingly using the useState and useEffect hook of ReactJS. The user enters the Bill Amount, Tip Percentage and the number of persons then the output will r

BMI Calculator Using React

In this article, we will create a BMI Calculator application using the ReactJS framework. A BMI calculator determines the relationship between a person's height and weight. It provides a numerical value that categorizes the individual as underweight, normal weight, overweight, or obese.Output Previe

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

Create a GPA Calculator using React Native

A GPA calculator proves to be a useful tool for students who want to monitor their academic progress. In this article, we will build a GPA calculator using React Native, a popular framework for building mobile applications.Preview ImagePrerequisitesIntroduction to React NativeReact Native Components

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

Create a Tip Calculator using React-Native

A Tip Calculator proves to be a convenient tool for effortlessly calculating tips and dividing bills among friends at restaurants. The app enables users to input the bill amount, select their desired tip perceÂntage, specify the numbeÂr of people sharing the bill, and promptly obtain calculateÂd val

Create a BMI Calculator App using React-Native

In this article, we will create a BMI (Body Mass Index) calculator using React Native. A BMI calculator serves as a valuable and straightforward tool for estimating body fat by considering height and weight measurements.A BMI Calculator App built with React Native allows users to input their age, he

Scientific Calculator using React

A scientific calculator is a tool, this project will be developed using REACT which performs basic and advanced calculations. In this project, our goal is to develop a web-based calculator using React. This calculator will have the capability to handle a range of functions.Preview of final output: L

Create an Age Calculator App using React-Native

In this article we are going to implement a Age calculator using React Native. An age calculator app in React Native is a simple application that calculates a person's age based on their birth date and the current date. It's a simple utility designed to determine how many years, months, and days hav