Design a Loan Calculator using JavaScript

Design a Student Grade Calculator using JavaScript

Last Updated : 28 Jun, 2025

A Student Grade Calculator (SGC) is a tool designed to calculate a student's overall grade based on their scores in different assessments like assignments, quizzes, exams, or projects. It helps in providing an accurate, standardized grade and gives students clear feedback on their academic progress.

How the Calculation Works

The main goal is to calculate the percentage of total marks obtained out of the maximum possible marks, then assign a grade based on that percentage

Formula to Calculate Percentage

percentage=(total marks/marks obtained)×100

Now let's understand this with the help of example:

Suppose a student scores a total of 320 marks out of 400

percentage=(400/320)×100=0.8×100=80%

How the Student Grade Calculator Works

This calculator accepts marks from different subjects — for example, Chemistry, Hindi, and Math — computes the total, calculates the percentage, and then assigns a grade based on predefined criteria.

Steps to Build the Calculator

Create a function called calculate() to perform all operations.
Retrieve input values from the user (marks for each subject).
Convert input values to numerical form for calculation.
Calculate total marks by summing the marks of all subjects.
Calculate the percentage using the total marks and maximum possible marks.
Assign thgrade based on the percentage using if-else conditions.
Validate input to ensure no empty or invalid values are entered.
Display results including total marks, percentage, grade, and pass/fail status.

Example: Now let's start the implementation of the student's grades calculator.

index.html

<html>
<head>
    <link href=
"https://fonts.googleapis.com/css?family=Righteous&display=swap" 
          rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <h1>Student grade calculator</h1>
        <div class="screen-body-item">
            <div class="app">
                <div class="form-group">
                    <input type="text" 
                           class="form-control" 
                           placeholder="CHEMISTRY" 
                           id="chemistry" />
                </div>
                <div class="form-group">
                    <input type="text" 
                           class="form-control" 
                           placeholder="HINDI" id="hindi" />
                </div>
                <div class="form-group">
                    <input type="text" 
                           class="form-control" 
                           placeholder="MATHS" id="maths" />
                </div>
                <div class="form-group">
                    <input type="text" 
                           class="form-control" 
                           placeholder="PHYSICS" id="phy" />
                </div>
                <div>
                    <input type="button" 
                           value="show Percentage" 
                           class="form-button" 
                           onclick="calculate()" />
                </div>
            </div>
        </div>
        <div class="form-group showdata">
            <p id="showdata"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #006600;
    font-size: 12px;
}

.container {
    flex: 0 1 700px;
    margin: auto;
    padding: 10px;
}

.screen-body-item {
    flex: 1;
    padding: 50px;
}

input {
    margin: 10px 10px 10px;
}

.showdata {
    color: black;
    font-size: 1.2rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

JavaScript code

Retrieve and Convert Inputs: Use document.querySelector to get values from input fields and convert them to numbers with parseFloat.
Calculate Total Marks: Sum the converted values of the four subjects.
Compute Percentage: Divide the total marks by 400 and multiply by 100 to find the percentage.
Assign Grade and Display Result: Use if-else conditions to determine the grade and innerHTML to display the total marks, percentage, grade, and pass/fail status on the webpage.

script.js

const calculate = () => {
    let chemistry = document.querySelector("#chemistry").value;
    let hindi = document.querySelector("#hindi").value;
    let maths = document.querySelector("#maths").value;
    let phy = document.querySelector("#phy").value;
    let grades = "";

    let totalgrades =
        parseFloat(chemistry) +
        parseFloat(hindi) +
        parseFloat(maths) +
        parseFloat(phy);

    let percentage = (totalgrades / 400) * 100;
    if (percentage <= 100 && percentage >= 80) {
        grades = "A";
    } else if (percentage <= 79 && percentage >= 60) {
        grades = "B";
    } else if (percentage <= 59 && percentage >= 40) {
        grades = "C";
    } else {
        grades = "F";
    }

    if (chemistry == "" || hindi == ""
        || maths == "" || phy == "") {
        document.querySelector("#showdata").innerHTML
            = "Please enter all the fields";
    } else {
        if (percentage >= 39.5) {
            document.querySelector(
                "#showdata"
            ).innerHTML =
                ` Out of 400 your total is  ${totalgrades} 
          and percentage is ${percentage}%. <br> 
          Your grade is ${grades}. You are Pass. `;
        } else {
            document.querySelector(
                "#showdata"
            ).innerHTML =
                ` Out of 400 your total is  ${totalgrades} 
          and percentage is ${percentage}%. <br> 
          Your grade is ${grades}. You are Fail. `;
        }
    }
};

Output

Design a Loan Calculator using JavaScript

D

deep089

Improve

Article Tags :

Similar Reads

HTML Calculator

HTML calculator is used for performing basic mathematical operations like Addition, subtraction, multiplication, and division.You can find the live preview below, try it: To design the basic calculator, we will use HTML , CSS , and JavaScript . HTML is used to design the basic structure of the calcu

JavaScript Calculator

To build a simple calculator using JavaScript, we need to handle basic arithmetic operations such as addition, subtraction, multiplication, and division. JavaScript, along with HTML and CSS, is commonly used to create interactive web-based calculators.What We Are Going to CreateWe will build a simpl

JavaScript Scientific Calculator

The HTML Scientific Calculator is a tool for performing advanced scientific calculations like finding exponents, logarithms, factorials, and more. This calculator comprises two sections: the input section, where the user types in their mathematical problem, and the output screen, which displays all

JavaScript Neumorphism Effect Calculator

In this article, we will learn how to create a working calculator with the Neumorphism effect using HTML, CSS, and JavaScript. Basic mathematical operations such as addition, subtraction, multiplication, and division can be performed using this calculator. Approach: Neumorphism is a contemporary app

JavaScript Age Calculator

In the Age Calculator, the user enters their date of birth using a date input field. The tool calculates and displays the exact age in years, months, and days from the current date (or a specified date). We'll design the layout using HTML and CSS, and add functionality using JavaScript. It will also

JavaScript Tip Calculator

The tip is the money given as a gift for good service to the person who serves you in a restaurant. In this project, a simple tip calculator is made that takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person.

JavaScript Geometry Calculator

In this article, we will see how to design a Geometry Calculator using HTML, CSS, and JavaScript. A Geometry calculator is used to calculate the area and parameters of different shapes and figures, like circles, rectangles, squares, triangles, etc. This can be helpful in cases where one wants to cal

JavaScript Aspect Ratio Calculator

In this article, we are going to implement an aspect ratio calculator. An aspect ratio calculator proves to be a useful tool for individuals seeking to determine the proportions of images or videos based on their width and height. Our aspect ratio calculator has a live preview option that enables us

JavaScript Binary Calculator

HTML or HyperText Markup Language along with CSS (Cascading Stylesheet) and JavaScript can be used to develop interactive user applications that can perform certain functionalities. Similarly, a binary calculator can be developed using HTML, CSS, and JS altogether. Binary Calculator performs arithme

JavaScript Percentage Calculator

The percentage calculator is useful for students, shopkeepers, and for solving basic mathematical problems related to percentages. In this article, we are going to learn, how to make a percentage calculator using HTML CSS, and JavaScriptFormula used:What is X percent of Y is given by the formula: X

JavaScript Profit and Loss Calculator

In this article, we will create a profit & loss calculator using HTML, CSS & Javascript for adding the basic functionality along with adding the design and layout. Profit and Loss Calculator is basically used to calculate the amount or percentage received after selling a particular price or

JavaScript BMI Calculator

A BMI (Body Mass Index) Calculator measures body fat based on weight and height, providing a numerical value to categorize individuals as underweight, normal weight, overweight, or obese. Itâ€™s widely used to assess health risks and guide lifestyle or medical decisions.A BMI Calculator using JavaScri

JavaScript Temperature Calculator

In this article, we will see Temperature Conversion between Celsius, Fahrenheit & Kelvin using HTML CSS & JavaScript. The Temperature is generally measured in terms of unit degree., i.e. in degrees centigrade, in degrees, Fahrenheit & Kelvin. Celsius is a standard unit of temperature on

JavaScript Student Grade Calculator

A Student Grade Calculator (SGC) is a tool designed to calculate a student's overall grade based on their scores in different assessments like assignments, quizzes, exams, or projects. It helps in providing an accurate, standardized grade and gives students clear feedback on their academic progress.

JavaScript Loan Calculator

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,

JavaScript Interest Calculator

Simple Interest is the term used to describe the rate at which money is borrowed or lent. Simple Interest Calculator serves as a practical tool for computing interest on loans or savings without compounding. It allows you to determine the simple interest on the principal amount, offering flexibility

JavaScript CGPA Calculator

Nowadays, colleges use grades like A, B, C, D, and F, and assign credits to courses. In this calculator, you just need to input your subject name, grade, and credit. We'll also include options to update or delete information in case of mistakes. This way, you won't have to re-enter all details if yo

JavaScript Bartletts Test Calculator

In this article, we are going to implement Bartlett's test calculator in JavaScript. Bartlett's test is a statistical test used to determine whether the variances of multiple groups are homogeneous and plays a crucial role in various fields of experimental research such as analysis of variance and h

JavaScript Unit Converter

In this article, we will be developing an interactive and styled unit converter using HTML, CSS, and JavaScript.In this application, we have a select category option box in which different types of units are specified, like temperature, area, weight, length, and time. As per the user selection, the

JavaScript Length Converter

In this article, we will learn how to create a length converter using HTML, CSS, and JavaScript. The Length Converter is an intuitive web-based application that eliminates the complexities associated with manual conversions. Its user-friendly interface allows users to input a numerical value and sel