Design a Student Grade Calculator using JavaScript
Last Updated :
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
href =
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 >
|
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.2 rem;
padding-top : 10px ;
padding-bottom : 10px ;
}
|
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:
Share your thoughts in the comments
Please Login to comment...