Design a Student Grade Calculator using JavaScript - GeeksforGeeks

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 grades 
const 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

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set input type date in dd-mm-yyyy format using HTML ?
Form validation using HTML and JavaScript
HTML | <img> align Attribute
How to set the default value for an HTML <select> element ?