Skip to content

Commit 0adf607

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #41 from saka015/sakajs
Added Grad_Calc Folder
2 parents c8663dd + 7af8e4a commit 0adf607

2 files changed

Lines changed: 166 additions & 0 deletions

File tree

‎Grade_Calc/Grade Calc.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="design.css">
9+
</head>
10+
<body>
11+
<button class="refresh" onclick="window.location.reload()">Check Another Result </button>
12+
<section class="box">
13+
14+
<div class="vl"></div>
15+
<div class="wrapper">
16+
<input class="input" type="text" placeholder="PHYSICS" id="phy">
17+
<hr>
18+
<input class="input" type="text" placeholder="CHEMISTRY" id="che">
19+
<hr>
20+
<input class="input" type="text" placeholder="MATHS" id="maths">
21+
<hr>
22+
<input class="input" type="text" placeholder="BIOLOGY" id="bio">
23+
<hr>
24+
<input type="button" name="" value="showPercentage" class="app-form-button" onclick="calcy()">
25+
26+
</div>
27+
<div class="header">STUDENT <br> GRADE <br> CALC</div>
28+
<div class="show">
29+
<p id="showData"></p>
30+
</div>
31+
32+
</section>
33+
<script>
34+
const calcy = () =>{
35+
let phy = document.getElementById('phy').value ;
36+
let maths = document.getElementById('che').value ;
37+
let che = document.getElementById('maths').value ;
38+
let bio = document.getElementById('bio').value ;
39+
let grades="";
40+
41+
42+
let totalGrades = parseFloat(phy) + parseFloat(maths) + parseFloat(che) + parseFloat(bio);
43+
// alert(totalGrades);
44+
45+
let perc = (totalGrades/400) * 100 ;
46+
//alert(perc);
47+
48+
if(perc <= 100 && perc >= 80){
49+
grades='A' ;
50+
}else if(perc <= 79 && perc >= 60){
51+
grades='B';
52+
}else if(perc <= 59 && perc >= 40){
53+
grades='C';
54+
}else if (perc>100){
55+
grades='Invalid'
56+
}
57+
else {
58+
grades='F';
59+
}
60+
if (perc >=40){
61+
document.getElementById('showData').innerHTML= `Out of 400 your Total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. You are PASS `
62+
}else{
63+
document.getElementById('showData').innerHTML= `Out of 400 your Total is ${totalGrades} and percentage is ${perc}%. <br> Your grade is ${grades}. Better Luck Next Time. `
64+
} if(perc>100){
65+
document.getElementById('showData').innerHTML= `Please Enter Valid Data`
66+
}
67+
68+
69+
}
70+
71+
</script>
72+
<p class="saka">Developed_@sakaX</p>
73+
</body>
74+
</html>

‎Grade_Calc/design.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
body{
2+
background-color: rgba(0, 255, 255, 0.863);
3+
}
4+
.box{
5+
background-color: rgba(0, 0, 0, 0.658);
6+
width: 670px;
7+
height: 380px;
8+
border-radius: 12px;
9+
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.521);
10+
11+
12+
margin-left: 340px;
13+
margin-top: 120px;
14+
align-items: center;
15+
}
16+
.header{
17+
18+
color: rgba(0, 255, 255, 0.863);
19+
font-weight: 700;
20+
font: bolder;
21+
font-size: 1.5em;
22+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23+
padding: 95px;
24+
25+
animation-name: sample;
26+
animation-duration: 1s;
27+
animation-iteration-count: infinite;
28+
animation-direction: alternate;
29+
30+
}
31+
@keyframes sample {
32+
from{font-size: 1.5em; color: aqua;}
33+
to{font-size: 1.5em; color: rgba(0, 255, 255, 0.658);}
34+
35+
}
36+
37+
.vl{
38+
position: absolute;
39+
margin: 90px 80px;
40+
41+
border-left: 2px solid rgba(0, 255, 255, 0.863);
42+
height: 110px;
43+
}
44+
.wrapper{
45+
position: absolute;
46+
margin: 65px 380px;
47+
48+
}
49+
input{
50+
background-color:rgba(0, 0, 0, 0.00);
51+
border: none;
52+
font-size: 1.2em;
53+
color: white;
54+
font-weight: 700;
55+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
56+
}
57+
::placeholder{
58+
color: white;
59+
}
60+
.app-form-button{
61+
color: rgba(0, 255, 255, 0.671);
62+
font: bolder;
63+
cursor: pointer;
64+
font-size: 1.1em;
65+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
66+
text-transform: uppercase;
67+
68+
}
69+
hr{
70+
71+
border: 0.3px solid rgba(0, 255, 255, 0.116);
72+
}
73+
#showData{
74+
color: white;
75+
font-weight: 600;
76+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
77+
margin-left: 85px;
78+
79+
}
80+
.saka{
81+
color: teal;
82+
margin-top: 95px;
83+
}
84+
.refresh{
85+
background-color: teal;
86+
border: none;
87+
color: rgba(0, 255, 255, 0.76);
88+
font-size: 1.2em;
89+
border-radius: 5px;
90+
padding: 2px;
91+
cursor: pointer ;
92+
}

0 commit comments

Comments
 (0)