This content originally appeared on DEV Community and was authored by Technical Vandar
Here is the student grade calculator using pure HTML, CSS & JS. In Web Format You can enter Some marks on some subjects and you can get total marks, percentage and Grade of Student
Source Code:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Morphism Grade Calculator</title>
</head>
<body>
<div class="calc-body">
<div class="result">
<h1>Result</h1>
<div class="show">
<h2>Total:<span id="total"></span></h2>
<br>
<h2>Percentage:<span id="percentage"></span></h2>
<br>
<h2>Grade:<span id="grade"></span></h2>
</div>
</div>
<div class="inp">
<div class="main">
<input type="number" name="" id="math" placeholder="Math"><br>
<input type="number" name="" id="physics" placeholder="Physics"><br>
<input type="number" name="" id="chemistry" placeholder="Chemistry"><br>
<input type="number" name="" id="cprogramming" placeholder="C Programming"><br>
<input type="number" name="" id="computer" placeholder="Computer"><br>
<button onclick="getResult()">Calculate Result</button>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Make CSS File with name as style.css For linking with styling
CSS CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: monospace;
}
body{
justify-content: center;
align-items: center;
min-height: 100vh;
display: flex;
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.calc-body{
background: radial-gradient(
rgba(255, 255, 255, 0.09),
rgba(255, 255, 255, 0.9)
); height: 50vh;
width: 45vw;
height: 70vh;
border-radius: 20px;
}
.result{
position: absolute;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
height: 70vh;
width: 20vw;
background: radial-gradient(
rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5)
);
}
.result h1{
font-size: 55px;
margin: 40px 0;
text-align: center;
}
h2{
font-size: 35px;
margin: 10px 30px;
}
.show{
margin-top: 85px;
}
.inp{
text-align: center;
justify-content: center;
align-items: center;
width: 60vw;
height: 70vh;
display: flex;
}
input{
font-weight: 880;
border-radius: 10px;
margin: 15px;
height: 45px;
padding: 20px;
border: none;
outline: none;
font-size: 20px;
border: 1px solid rgb(223, 217, 217);
background: rgba(0, 0, 0, 0.05);
}
.main{
margin-left: 45px;
}
button{
margin-top: 20px;
height: 45px;
width: 200px;
font-weight: 650;
cursor: pointer;
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgb(223, 217, 217);
outline: none;
font-size: 20px;
}
::placeholder{
font-weight: 850;
}
Make One JavaScript File With name as main.js
JavaScript Code:
const getResult = () => {
let math = document.getElementById('math').value;
let physics = document.getElementById('physics').value;
let chemistry = document.getElementById('chemistry').value;
let c = document.getElementById('cprogramming').value;
let computer = document.getElementById('computer').value;
if(document.getElementsByTagName('input').value==""){
alert("Please Enter Some Value");
}
let total = parseFloat(math) + parseFloat(physics) + parseFloat(chemistry) + parseFloat(c) + parseFloat(computer);
let percentage = (total * 100) / 500;
if (percentage >= 90) {
document.getElementById("grade").innerHTML = "A+";
}
else if (percentage >= 80) {
document.getElementById("grade").innerHTML = "A";
}
else if (percentage >= 70) {
document.getElementById("grade").innerHTML = "B+";
}
else if (percentage >= 60) {
document.getElementById("grade").innerHTML = "B";
}
else if (percentage >= 50) {
document.getElementById("grade").innerHTML = "B+";
}
else if (percentage >= 40) {
document.getElementById("grade").innerHTML = "C+";
}
else if (percentage >= 30) {
document.getElementById("grade").innerHTML = "C";
}
else if (percentage >= 20) {
document.getElementById("grade").innerHTML = "D+";
}
else {
document.getElementById("grade").innerHTML = "You Are Failed";
}
document.getElementById('percentage').innerHTML = percentage;
document.getElementById('total').innerHTML = total;
}
Youtube Tutorial
Watch Here
Find Me On:
This content originally appeared on DEV Community and was authored by Technical Vandar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Technical Vandar | Sciencx (2021-09-25T14:27:46+00:00) Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.. Retrieved from https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/
" » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.." Technical Vandar | Sciencx - Saturday September 25, 2021, https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/
HARVARDTechnical Vandar | Sciencx Saturday September 25, 2021 » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.., viewed ,<https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/>
VANCOUVERTechnical Vandar | Sciencx - » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/
CHICAGO" » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.." Technical Vandar | Sciencx - Accessed . https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/
IEEE" » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.." Technical Vandar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/. [Accessed: ]
rf:citation » Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS. | Technical Vandar | Sciencx | https://www.scien.cx/2021/09/25/glass-morphism-student-grade-calculator-using-pure-html-css-js/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.