Design a Student Grade Calculator using JavaScript

26 Aug, 2021
Student Grade Calculator (SGC) can be used to calculate a percentage based on the marks of students. (SGC) is a fairly reliable indicator of student results.
Formula:
percentage =  ( totalgrades / 400 ) *  100 ;
Approach: SGC is a percentage calculator from a student’s marks. To find out SGC we will take input from the user (for the four subjects) stored in Chemistry, Hindi, and Math variables for further calculation. The calculation process is simple, we will simply First we will add all the input marks and store them in the total grades variable after that we will divide it by the sum of maximum marks of each subject. and later on we will let one more variable named as grades which will store the grades. Now as per the percentage calculated, it will execute the respective if-else statement. Printing in the result is a percentage and the grade of the student. Using HTML we are giving desired structure, option for the input, and submit button. With the help of CSS, we are beautifying our structure by giving colors and desired font, etc. In the JavaScript section, we are processing the taken input and after calculating, the respective output is printed.
Steps to create the calculator:
First, we will make a function named as calculate.
Initializing all the variables and storing the values input by the user.
Now converting the values in float data type.
Then we use simple mathematics to perform the calculation.
Then we have implemented the if-else condition.
Then we check the condition for empty inputs and if it is not empty then we will execute our output.
 
Example: Now let’s start the implementation of the student’s grades calculator.
index.html
<!DOCTYPE html><html>  <head>    <title>student calculate</title>    <!-- link for font  -->    <link      href="https://fonts.googleapis.com/css?family=Righteous&display=swap"      rel="stylesheet"    />    <link rel="stylesheet" href="style.css" />  </head>  <body>    <!-- main html  -->    <div class="container">      <h1>Student grade calculator</h1>      <div class="screen-body-item">        <div class="app">          <div class="form-group">            <!-- option for taking the input -->            <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>      <!-- for showing the result-->      <div class="form-group showdata">        <p id="showdata"></p>      </div>    </div>    <!--adding external javascript file-->    <script src="script.js"></script>  </body></html>
style.css
style.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;}
script.js
// Function for calculating gradesconst calculate = () => {    // Getting input from user into height variable.  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 = "";    // Input is string so typecasting is necessary. */  let totalgrades =    parseFloat(chemistry) +    parseFloat(hindi) +    parseFloat(maths) +    parseFloat(phy);    // Checking the condition for the providing the   // grade to student based on percentage  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";  }  // Checking the values are empty if empty than  // show please fill them  if (chemistry == "" || hindi == ""             || maths == "" || phy == "") {    document.querySelector("#showdata").innerHTML         = "Please enter all the fields";  } else {      // Checking the condition for the fail and pass    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:
surindertarika1234
CSS-Properties
CSS-Questions
HTML-Basics
HTML-Questions
HTML-Tags
JavaScript-Methods
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS