नोट :- यदि आपको सोर्स कोड सही से न दिख रहें हो तो कृपया अपने ब्राउज़र को डेस्कटॉप मोड में करलें |




 <html> code

<!DOCTYPE html>

<html>
    <head>
        <title>Student grade calc</title>
        <link rel="stylesheet" href="aseets/style.css">
    </head>
    <body>
        <div class="container">
            <div class="left_container">
                <span>Student grade<br> calcy.🤷‍♂️</span>
            </div>
            <div class="right_container">
                <div>
                    <input type="text" class="form-control"  id="hi" placeholder="Hindi">
                    <input type="text" class="form-control"  id="en" placeholder="English">
                    <input type="text" class="form-control"  id="math" placeholder="Math">
                    <input type="text" class="form-control"  id="comp" placeholder="Computer">
                    <input type="text" class="form-control"  id="phy" placeholder="Physics">
                    <input type="button" class="btn" value="Click here to input numbers" onclick="calcy()">
                </div>  
            </div>
        </div>

        <div class="show">
             <p id="result"> </p>
        </div>

<!-- i am starting from here script tag -->

        <script>
            const calcy = () =>{
                let hi = document.getElementById("hi").value;
                let en = document.getElementById("en").value;
                let math = document.getElementById("math").value;
                let comp = document.getElementById("comp").value;
                let phy = document.getElementById("phy").value;
                let grade ="";
                let sum = parseFloat(hi) + parseFloat(en) + parseFloat(math) + parseFloat(comp) + parseFloat(phy);
                let pers = (sum/500) * 100;
                // alert("Addition= "+sum +" Percentage= "+pers);
                if (pers<=100 && pers>=60){
                    grade = 'A';
                }else if(pers<=59 && pers>=45){
                    grade = 'B';
                }else if(pers<=44 && pers>=33){
                    grade = 'C';
                }else{
                    grade = 'F';
                }  
                if (pers<=32){
                    document.getElementById("result").innerHTML=`Out of 500 your total is  
                    ${sum} and percentage is ${pers}%. <br> Your grade is ${grade}.So you are Fail.`
                } else{
                    document.getElementById("result").innerHTML=`Out of 500 your total is  
                    ${sum} and percentage is ${pers}%. <br> Your grade is ${grade}.So you are Pass.`
                }
            }
        </script>
    </body>
</html>

<html> code


*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;

}
body{
    background-color: aquamarine;
}
.container{
    padding: 10px;
    background-color: antiquewhite;
    border: 1px solid red;
    width: 80%;
    margin:30px auto;
    display: grid;
    grid-template-columns: 50% 1fr ;
    grid-template-rows: auto;
    align-items: center;
    border-radius: 40px;
}
.left_container{
    font-size: 45px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(16, 123, 194);
    text-align: left;
    text-transform: uppercase;
    line-height: 40px;
}

.right_container, input{
    width: 100%;
    padding: 10px;
    margin: 5px;
    border-radius: 15px;
    border: none;
    outline: none;
    overflow: hidden;
}

.btn{
    background-color: blueviolet;
    height: 10vh;
    padding: 0px 10px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}

.show{
    width: 40%;
    height: 15vh;
    text-align: center;
    padding: 20px;
    margin: auto;
    clear: both;
    color: #fff;
    background-color: brown;
    border-radius: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    overflow: hidden;
}