Header Ads Widget

JavaScript student grade calculator

My codding spot February 19, 2022

This post will describe the making of student grade calculator with HTML, CSS and JavaScript. 

In this post we will calculate total marks, percentage, and grade using javascript.

Skills Requirements

HTML

For structure following HTML tags are used.

 <div></div>,<table></table>, <form></form>,<label></label>,<input></input>,<button></button>,<h1></h1> and <h2></h2>.

CSS

For the design of the grade calculator font style properties, margin, padding, border, border-radius, outline, height and width, box-shadow, color, background-color, etc... properties are used.

JavaScript

In JavaScript, to make a calculator workable calculate function is defined. The nested if else if statements are written inside a function.

Steps for creating student grade calculator.


Step 1: 

Our first step is making the structure of the grade calculator using HTML. Specify the <div class=”main”></div> element and define all other elements under it.

Step 2:

A total of eight input fields are defined. Specify text type for name and rest of the fields specify input type number. Also, specify headings with <th> </th> and take one button. 

Step 3:

To find a grade it is necessary to find the summation of all the subject's marks and percentage. Specify fields for total, percentage, and grade.

Step 4:

Now, after making the structure, it is turned to designing. Specify background color, height, width, padding, and shadow to div class main. Set “times new Romans”, size and bold font for all. Apply styles to the table, all the input fields, buttons, and labels.

Step 5:

After structuring and designing the grade calculator, next, write Javascript code for it. Define the function and get all input values and store it in variables. Then specify a regular expression for the name and obtained marks. (Restrictions: name should be greater than or equal to 5 characters and subject marks are less than or equal to hundred. Presiding 0 is not allowed. (like 09)).

Step 6:

Now write nested if else if conditions to check null values and patterns matching and calculate a grade. 
First if else if statement checks for name roll number and all subjects obtained marks. If both conditions are false then the total and percentage will be calculated, after that another if else if statement is defined for grade calculation.

Formulas for total and percentage:

Total = summation of obtained marks.
Percentage = total of all subjects (obtained marks) / total of all subjects (maximum marks) * 100

Step 7:

In the second if else if statement grade is calculated. If a student gets marks less than 30 in any subject or a percentage is below 40 then consider as a failure and specify “F” grade.

Percentage between greater than or equal to 40 and less than or equal to 50 consider as an average class and specify “E” grade.

Percentage between greater than or equal to 51 and less than or equal to 60 consider as a pass class and specify “D” grade.

Percentage between greater than or equal to 61 and less than or equal to 70 consider as a second class and specify “C” grade.

Percentage between greater than or equal to 71 and less than or equal to 80 consider as a first class and specify “B” grade.

Percentage greater than 80 consider as a distinction and specifies an “A” grade.

An output image of student grade calculator

Student grade calculator with HTML CSS and JavaScript
Student grade calculator with HTML, CSS, and JavaScript



Following is the full source code of the student grade calculator.

HTML:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>Student Grade Calculator</title>
<link rel="stylesheet" href="stud grade calc.css">
<script src="stud_grade_calculator.js"></script>
</head>
<body>
<div class="main">
<form name="gradefrm"  target="_self">
<table>
<tr>
<td><label for="fnm">Full name</label></td>
<td><input type="text" name="fullnm" placeholder="name of student"></td>
</tr>
<tr>
<td><label for="rno">Roll no.</label></td>
<td><input type="number" name="rollno" placeholder="roll number"></td>
</tr>
<tr>
<th>Subject name</th>
<th>Annual marks</th>
</tr>
<tr>
<td><label for="eng">English</label></td>
<td><input type="number" name="english">/100</td>
</tr>
<tr>
<td><label for="hind">Hindi</label></td>
<td><input type="number" name="hindi">/100</td>
</tr>
<tr>
<td><label for="gj">Gujarati</label></td>
<td><input type="number" name="guj">/100</td>
</tr>
<tr>
<td><label for="math">Mathematics</label></td>
<td><input type="number" name="math">/100</td>
</tr>
<tr>
<td><label for="sc">Science</label></td>
<td><input type="number" name="sci">/100</td>
</tr>
<tr>
<td><label for="soc">Social Science</label></td>
<td><input type="number" name="ss">/100</td>
</tr>
<tr>
<td>
<button type="button" id="btn" onclick="calculate()">calculate</button>
</td>
</tr>
<tr>
<td>
<h1>Total of all subjects=</h1>
</td>
<td>
<input type="number" id="total" name="res" readonly>
</td>
</tr>
<tr>
<td>
<h1>Percentage=</h1>
</td>
<td><input type="number" id="percent" name="perc" readonly>
</td>
</tr>
<tr>
<td>
<h1>Grade=</h1>
</td>
<td><h2 id="grd"></h2>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

CSS:-

.main
{
height:auto;
width:50%;
margin-left:25%;
background-color:#fcb4ae;
padding:5px;
box-shadow:0px 10px 10px #000000;
}
*{
font-family:Times new romans,Times,serif;
font-weight:bold;
font-size:18px;
}
table
{
margin-left:22%;
background-color:#0099ff;
outline:#009999 3px groove;
padding:5px;
border-radius:8px;
}
input[type="text"]
{
width:200px;
}
input
{
height:30px;
width:150px;
color:#b42ac9;
background-color:#fcb4ae;
border-bottom:2px solid #b4cbf7;
border-top:none;
border-right:none;
border-left:none;
outline:none;
}
#btn
{
width:100%;
height:50px;
margin-left:50px;
background-color:#c49abc;
color:#b20cf9;
border-radius:30px;
margin-top:10px;
border:3px outset #ffcc44; 
}
#btn:hover
{
border:3px inset #ccffb4;
}
#btn:active
{
width:120%;
color:#000fff;
}
th
{
margin-top:15px;
color:#bb76b8;
}
h1
{
color:#0b0fc2;
background:linear-gradient(#003377,#ffffff);
border-radius:20px;
padding:10px;
}
#total,#percent,#grd
{
color:#fc0b12;
background:radial-gradient(#fffccc,#cccfff);
padding:5px;
border-radius:30px;
}
#grd
{
width:50%;
margin-left:10px;
}

Javascript:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function calculate()
{
var nm=document.forms["gradefrm"]["fullnm"].value;
var rno=document.forms["gradefrm"]["rollno"].value;
var en=document.forms["gradefrm"]["english"].value;
var h=document.forms["gradefrm"]["hindi"].value;
var m=document.forms["gradefrm"]["math"].value;
var g=document.forms["gradefrm"]["guj"].value;
var s=document.forms["gradefrm"]["sci"].value;
var soc=document.forms["gradefrm"]["ss"].value;
var ptrn=/[A-Za-z].{5,}/;
var nptr=/\b([0-9]|[1-9][0-9]|100)\b/;
if(nm,rno=="" || !nm.match(ptrn))
{
alert("please,enter name and rollnumber properly");
}
else if(en,h,m,g,s,soc=="" || !en.match(nptr) || !h.match(nptr) || !m.match(nptr) || !g.match(nptr) || !s.match(nptr) || !soc.match(nptr))
{
alert("please,enter all subject marks less than or equal to hundred.");
}
else
{
var tot=+en + +h + +m + +g + +s + +soc;
document.forms["gradefrm"]["res"].value=tot;
var per=tot/600*100;
document.forms["gradefrm"]["perc"].value=per;
if (per<40 || en<30 || h<30 || m<30 || g<30 || s<30 || soc<30)
{
document.getElementById("grd").innerHTML="F";
}
else if (per<=50 && per>=40)
{
document.getElementById("grd").innerHTML="E";
}
else if (per<=60 && per>=51)
{
document.getElementById("grd").innerHTML="D";
}
else if (per<=70 && per>=61)
{
document.getElementById("grd").innerHTML="C";
}
else if (per<=80 && per>=71)
{
document.getElementById("grd").innerHTML="B";
}
else if(per>80)
{
document.getElementById("grd").innerHTML="A";
}
}
}

Final Output of student grade calculator





Summary

This grade calculator is suitable for school students specifically 10th class students, because here main subjects are mentioned.

If you want to enter a subject from users then take <input type=”text”> instead of <label></label> and get values like others.

In most schools, the annual marks are calculated from 100, so I took 100 as all subjects’ maximum marks.
Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments