Student Grade Calculator in JavaScript with Code Hindi
Student Grade Calculator
Each student has to enter respective subject marks.
1. Find Total?
2. Find Percentage?
3. Find Grade?
4. Check Pass or Fail.
5. Combined all and show Output.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
body {
background:#33d9b2;
font-size: 12px;
}
body, button, input {
font-family: 'Righteous', cursive;
font-weight: 700;
letter-spacing: 1.4px;
}
.background {
display: flex;
min-height: 100vh;
}
.container {
flex: 0 1 700px;
margin: auto;
padding: 10px;
}
.screen {
position: relative;
background: #3e3e3e;
border-radius: 15px;
}
.screen:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 20px;
right: 20px;
bottom: 0;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
z-index: -1;
}
.screen-body {
display: flex;
}
.screen-body-item {
flex: 1;
padding: 50px;
}
.screen-body-item.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.app-title {
display: flex;
/*flex-direction: column;*/
justify-content: center;
align-items: center;
color: #33d9b2;f;
font-size: 26px;
text-transform: uppercase;
border-left: 4px solid #218c74;
padding: 10px;
}
.app-form-group {
margin-bottom: 15px;
}
.app-form-group.buttons {
margin-bottom: 0;
text-align: right;
}
.app-form-control {
width: 100%;
padding: 10px 0;
background: none;
border: none;
border-bottom: 1px solid #666;
color: #ddd;
font-size: 14px;
text-transform: uppercase;
outline: none;
transition: border-color .2s;
}
.app-form-control::placeholder {
color: #FFF;
}
.app-form-control:focus {
border-bottom-color: #ddd;
}
.app-form-button {
background: none;
border: none;
color: #33d9b2;
font-size: 14px;
cursor: pointer;
outline: none;
text-transform: uppercase;
}
.app-form-button:hover {
color: #218c74;
}
.showdata{
text-align: center;
color: white;
font-size: 1.2rem;
padding-top: -10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<!-- Student Grade Calculator
Each student has to enter respective subject marks.
1. Find Total?
2. Find Percentage?
3. Find Grade?
4. Check Pass or Fail.
5. Combined all and show Output.
DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi -->
DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi -->
<div class="background">
<div class="container">
<div class="screen">
<div class="screen-body">
<div class="screen-body-item left">
<div class="app-title">
<div class="animated infinite pulse">
Student <br> Grade <br> Calcy
</div>
</div>
</div>
<div class="screen-body-item">
<div class="app-form">
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="WEB PROGRAMMING" id="wd">
</div>
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="MATHS" id="maths">
</div>
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="COMPUTER" id="comp">
</div>
<div class="app-form-group">
<input type="text" class="app-form-control" placeholder="PHYSICS" id="phy" >
</div>
<div >
<input type="button" name="" value="showPercentage" class="app-form-button" onclick="calcy()">
</div>
</div>
</div>
</div>
<div class="app-form-group showdata">
<p id="showData" > </p>
</div>
</div>
</div>
<script>
const calcy = () =>{
let wd = document.getElementById('wd').value;
let maths = document.getElementById('maths').value;
let comp = document.getElementById('comp').value;
let phy = document.getElementById('phy').value;
let grades = "";
let totalGrades = parseFloat(wd) + parseFloat(maths) + parseFloat(comp) + parseFloat(phy);
alert(totalGrades);
let perc = (totalGrades/400) * 100;
alert(perc);
debugger;
if(perc <= 100 && perc >= 80){
grades = 'A';
}else if(perc <= 79 && perc >= 60){
grades = 'B';
}else if(perc <= 59 && perc >= 40){
grades = 'C';
}else{
grades = 'F';
}
if(perc >= 39.5){
document.getElementById('showData').innerHTML = ` Out of 400 your total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are Pass. `
}
else{
document.getElementById('showData').innerHTML = ` Out of 400 your total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are Fail. `
}
}
</script>
</body>
</html>
