-
Notifications
You must be signed in to change notification settings - Fork 0
/
grade.html
150 lines (146 loc) · 4.23 KB
/
grade.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<title>student calculate</title>
<!-- link for font -->
<link
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
rel="stylesheet"
/>
<script>
// 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. `;
}
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
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;
}
</style>
</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>