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= 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:
