Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 25, 2021 02:27 pm GMT

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>

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:

Facebook
Youtube
Github

Original Link: https://dev.to/technicalvandar885/glass-morphism-student-grade-calculator-using-pure-html-css-js-5e4b

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To