DEV Community

Cover image for Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.
Technical Vandar
Technical Vandar

Posted on

Glass Morphism Student Grade Calculator Using Pure HTML, CSS & JS.

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github

Retry later

Top comments (2)

Collapse
 
zwyklo profile image
1MrHous1

Can I also use the font, background and code colors on this page in my visual studio?

Collapse
 
technicalvandar885 profile image
Technical Vandar

copy code and
you can customize yourself

Retry later
Retry later