In this post, I’m going to share the source code of the JavaScript project “Grade Calculating System”. This JavaScript project is helpful to understand the use of JS HTML DOM methods.
First of all, create any directory with the name “Grading system js”.
Now create a file with the name “index.html” and copy and paste below HTML code.
<!DOCTYPE html>
<html>
<head>
<title>GCS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body style="background-color: #DADA !important">
<div class="container fw-bold">
<div class="row">
<div class="col-8 m-auto bg-dark text-white p-4">
<h4 class="text-center">Grade Calculating System</h4>
</div>
</div>
<div class="row">
<div class="col-lg-8 d-flex justify-content-around col-md-12 m-auto bg-white p-5">
<div class="col-md-4 m-auto">
<form>
<div class="book1 mb-3">
<label>Computer</label>
<input required="" class="form-control" id="bookOne" type="number" name="" placeholder="Marks">
</div>
<div class="book2 mb-3">
<label>English</label>
<input required="" class="form-control" id="bookTwo" type="number" name="" placeholder="Marks">
</div>
<div class="book3 mb-3">
<label>Physics</label>
<input required="" class="form-control" id="bookThree" type="number" name="" placeholder="Marks">
</div>
<div class="book4 mb-3">
<label>Chemistry</label>
<input required="" class="form-control" id="bookFour" type="number" name="" placeholder="Marks">
</div>
<div class="book5 mb-3">
<label>Math</label>
<input required="" class="form-control" id="bookFive" type="number" name="" placeholder="Marks">
</div>
<div>
<button class="btn btn-warning col-12" onclick=" return calculate()">Calculate</button>
</div>
</form>
</div>
<div class="col-md-4 m-auto">
<div>
<table class="table table-bordered border-dark">
<tr>
<td>Total Marks</td>
<td>500</td>
</tr>
<tr>
<td>Obtained Marks</td>
<td id="obtain"></td>
</tr>
<tr>
<td>Percentage</td>
<td id="per"></td>
</tr>
<tr>
<td>Grade</td>
<td id="grade"></td>
</tr>
<tr>
<td>Remarks</td>
<td id="remarks"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="grade.js"></script>
</body>
</html>Now create a file with name “grade.js” and copy paste below JavaScript code.
function calculate(){
var a=parseInt(document.getElementById('bookOne').value);
var b=parseInt(document.getElementById('bookTwo').value);
var c=parseInt(document.getElementById('bookThree').value);
var d=parseInt(document.getElementById('bookFour').value);
var e=parseInt(document.getElementById('bookFive').value);
if (a>100 || b>100 || c>100 || d>100 || e>100) {
alert("Please enter correct value");
}
else
{
var obtain=a+b+c+d+e;
document.getElementById("obtain").innerHTML=obtain;
var per=obtain/500*100;
document.getElementById("per").innerHTML=per;
if (a>40 && b>40 && c>40 && d>40 && e>40)
{
document.querySelector("#remarks").innerHTML="<span style='color:#292'>Pass</span>";
}
else
{
document.querySelector("#remarks").innerHTML="<span style='color:red'>Fail</span>";
}
if (per>=80) {
document.getElementById("grade").textContent="A";
}
else if (per>=70) {
document.getElementById("grade").textContent="B";
}
else if (per>=60) {
document.getElementById("grade").textContent="C";
}
else if (per>=50) {
document.getElementById("grade").textContent="D";
}
else if (per>=40) {
document.getElementById("grade").textContent="E";
}
else{
document.getElementById("grade").textContent="F";
}
}
return false;
}Download Complete Source Code
