Hướng dẫn how to make a grade calculator in html - cách tạo máy tính điểm bằng html

    
    
    
    Glass Morphism Grade Calculator




    
        
            
Result
            
                
Total:
                

                
Percentage:
                

                
Grade:
            

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tạo tệp CSS có tên là style.css để liên kết với kiểu dáng

Mã CSS:

*{
    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 h2{
    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;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tạo tệp CSS có tên là style.css để liên kết với kiểu dáng

Mã CSS:

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;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tạo tệp CSS có tên là style.css để liên kết với kiểu dáng

Mã CSS:

Tạo một tệp javascript có tên là main.js

Mã JavaScript:
Youtube
Github