How to combine JavaScript processed value with my circular progress Bar Dynamically-CodePudding

I have the following JavaScript student marks grading system. The purpose of the project is to take input of various courses mark and calculate the sum, average and grade of the inputted marks as well as passing remark. This all works fine using my JavaScript codes. However, I want to take the project one step further and I wanted to display the average mark dynamically using circular progress bar when the show result button is clicked. I have created an animated circular progress bar that works fine as well from the script section. However, I want it to wok in tandem with grading system. How can I achieve that? I am new to JavaScript, I need your help? My HTML, CSS and JavaScript codes are as follows:

function show_result(){
    // console.log("show_result")
    let c = document.querySelector("#c").value;
    let mt = document.querySelector("#mt").value;
    let ph = document.querySelector("#ph").value;
    let ja = document.querySelector("#ja").value;
    let csa = document.querySelector("#csa").value;
    

    let to = parseFloat(c) parseFloat(mt) parseFloat(ph) parseFloat(ja) parseFloat(csa);
    const per = (to*100)/500;

    if (per >= 90){
        document.querySelector(".gra").innerHTML = "A ";
    }else if (per >= 80){
        document.querySelector(".gra").innerHTML = "A";
    }else if (per >=70){
        document.querySelector(".gra").innerHTML = "B";
    }else if (per >=60){
        document.querySelector(".gra").innerHTML = "C";
    }else if (per >=50){
        document.querySelector(".gra").innerHTML = "D";
    }else {
        document.querySelector(".gra").innerHTML = "F";
    }

    document.querySelector(".to").innerHTML = to;
    document.querySelector(".per").innerHTML = per;

    if (per >=50) {
        document.querySelector(".result h2").innerHTML = "Pass";
    }

}

let progressBar = document.querySelector(".circular-progress");
let valueContainer = document.querySelector(".value-container");

let progressValue = 0;
let progressEndValue = 65;
let speed = 10;

let progress = setInterval(() => {
    progressValue  ;
    valueContainer.textContent= `${progressValue}%`;
    progressBar.style.background = `conic-gradient(
        #4d5bf9 ${progressEndValue * 3.6}deg,
        #cadcff ${progressEndValue * 3.6}deg
    )`;
    if (progressValue == progressEndValue) {
        clearInterval(progress);
    }
}, speed);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container {
    background-color: #ecf0f1;
    width: 700px;
    height: 500px;
    box-shadow: 0px 10px 10px 0px #000;
    border-radius: 10px;
}

.left-box {
    position:absolute;
    width: 250px;
    height: 400px;
    background-color: #00d2d3;
    border-radius: 10px 0px 0px 10px;
}

.left-box h1 {
    margin-top: 50px;
    text-align: center;
    font-size: 2.5rem;
    color: #ecf0f1;
    font-weight: 900;
    letter-spacing: 3px;
}

.p-g-t {
    text-align: center;
    display: grid;
    place-content: center;
    min-height: 30vh;

}

.p-g-t h2 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 20px 0px;
}

.right-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 62vw;
    min-height: 50vh;
}

input {
    margin: 10px 0px;
    width: 300px;
    height: 30px;
    padding: 10px;
    outline: none;
    border: 0;
    border-radius: 30px;
    font-size: 0.9rem;
}

.right-box button {
    height: 40px;
    width: 150px;
    margin-top: 10px;
    padding: 0px 10px;
    background-color: #00d2d3;
    color: #ecf0f1;
    border: 0;
    outline: none;
    font-size: medium;
    font-weight: 900;
    border-radius: 30px;
    cursor: pointer;
}

.result {
    position: absolute;
    bottom: 182px;
    width: 250px;
    height: 50px;
    background-color: #00d2d3;
    border-radius: 0px 0px 0px 10px;
}

.result h2 {
    text-align: center;
    line-height: 50px;
    font-size: 1.3rem;
    color: #ecf0f1;
    font-weight: 900;
    letter-spacing: 3px;
}

.percent {
    height: 160px;
    width: 200px;
    background-color: #ecf0f1;
    margin-left: 450px;
    margin-top: 25px;
    border-radius: 8px;
    box-shadow: 20px 20px 40px rgba(60, 60, 150, 0.25);
    display: grid;
    place-items: center;
    
}

.circular-progress {
    position: relative;
    height: 150px;
    width: 150px;
    background-color: orange;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.circular-progress:before {
    content: "";
    position: absolute;
    height: 84%;
    width: 84%;
    background-color: #ecf0f1;
    border-radius: 50%;
}

.value-container {
    position: relative;
    font-family: sans-serif;
    font-size: 50px;
    color: #231c3d;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grade Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div >
        <div >
            <h1>Result</h1>
            <div >
                <h2>Percenatge-<span >0</span>%</h2>
                <h2>Grade-<span ></span></h2>
                <h2>Total-<span ></span></h2>
            </div>
        </div>
        <div >
            <div >
                <input type="number" id="c" placeholder="c programming">
                <input type="number" id="mt" placeholder="maths">
                <input type="number" id="ph" placeholder="php">
                <input type="number" id="ja" placeholder="java">
                <input type="number" id="csa" placeholder="computer system architecture">
                <button type="button" onclick="show_result()">Show Result</button>
                
            </div>
        </div>
        <div >
            <h2></h2>

        </div>
        <div >
            <div >
                <div ></div>

            </div>
        </div>
        
    </div>

    <!-- Js script -->
    <script src="fifth.js"></script>
</body>
</html>

CodePudding user response：

Is this what you are looking for? I have also inserted comments where needed so let me know if this answers your question.

function show_result(){
    // console.log("show_result")
    let c = document.querySelector("#c").value;
    let mt = document.querySelector("#mt").value;
    let ph = document.querySelector("#ph").value;
    let ja = document.querySelector("#ja").value;
    let csa = document.querySelector("#csa").value;
    

    let to = parseFloat(c) parseFloat(mt) parseFloat(ph) parseFloat(ja) parseFloat(csa);
    const per = (to*100)/500;

    if (per >= 90){
        document.querySelector(".gra").innerHTML = "A ";
    }else if (per >= 80){
        document.querySelector(".gra").innerHTML = "A";
    }else if (per >=70){
        document.querySelector(".gra").innerHTML = "B";
    }else if (per >=60){
        document.querySelector(".gra").innerHTML = "C";
    }else if (per >=50){
        document.querySelector(".gra").innerHTML = "D";
    }else {
        document.querySelector(".gra").innerHTML = "F";
    }

    document.querySelector(".to").innerHTML = to;
    document.querySelector(".per").innerHTML = per;

    if (per >=50) {
        document.querySelector(".result h2").innerHTML = "Pass";
    }

    let progressBar = document.querySelector(".circular-progress");
    let valueContainer = document.querySelector(".value-container");

    // you want the following code to run everytime show_result button is clicked
    let progressValue = 0;
    // set average value to progressEndValue
    let progressEndValue = per;
    let speed = 10;

    let progress = setInterval(() => {
        // check for NaN
        if (isNaN(per)) {
            clearInterval(progress);
            return;
        }
        progressValue  ;
        valueContainer.textContent= `${progressValue}%`;
        progressBar.style.background = `conic-gradient(
            #4d5bf9 ${progressEndValue * 3.6}deg,
            #cadcff ${progressEndValue * 3.6}deg
        )`;

        //since we may be comparing decimal to whole number, it is safe to use >= to avoid infinite interval
        if (progressValue >= progressEndValue) {
            clearInterval(progress);
        }
    }, speed);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container {
    background-color: #ecf0f1;
    width: 700px;
    height: 500px;
    box-shadow: 0px 10px 10px 0px #000;
    border-radius: 10px;
}

.left-box {
    position:absolute;
    width: 250px;
    height: 400px;
    background-color: #00d2d3;
    border-radius: 10px 0px 0px 10px;
}

.left-box h1 {
    margin-top: 50px;
    text-align: center;
    font-size: 2.5rem;
    color: #ecf0f1;
    font-weight: 900;
    letter-spacing: 3px;
}

.p-g-t {
    text-align: center;
    display: grid;
    place-content: center;
    min-height: 30vh;

}

.p-g-t h2 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 20px 0px;
}

.right-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 62vw;
    min-height: 50vh;
}

input {
    margin: 10px 0px;
    width: 300px;
    height: 30px;
    padding: 10px;
    outline: none;
    border: 0;
    border-radius: 30px;
    font-size: 0.9rem;
}

.right-box button {
    height: 40px;
    width: 150px;
    margin-top: 10px;
    padding: 0px 10px;
    background-color: #00d2d3;
    color: #ecf0f1;
    border: 0;
    outline: none;
    font-size: medium;
    font-weight: 900;
    border-radius: 30px;
    cursor: pointer;
}

.result {
    position: absolute;
    bottom: 182px;
    width: 250px;
    height: 50px;
    background-color: #00d2d3;
    border-radius: 0px 0px 0px 10px;
}

.result h2 {
    text-align: center;
    line-height: 50px;
    font-size: 1.3rem;
    color: #ecf0f1;
    font-weight: 900;
    letter-spacing: 3px;
}

.percent {
    height: 160px;
    width: 200px;
    background-color: #ecf0f1;
    margin-left: 450px;
    margin-top: 25px;
    border-radius: 8px;
    box-shadow: 20px 20px 40px rgba(60, 60, 150, 0.25);
    display: grid;
    place-items: center;
    
}

.circular-progress {
    position: relative;
    height: 150px;
    width: 150px;
    background-color: orange;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.circular-progress:before {
    content: "";
    position: absolute;
    height: 84%;
    width: 84%;
    background-color: #ecf0f1;
    border-radius: 50%;
}

.value-container {
    position: relative;
    font-family: sans-serif;
    font-size: 50px;
    color: #231c3d;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grade Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div >
        <div >
            <h1>Result</h1>
            <div >
                <h2>Percenatge-<span >0</span>%</h2>
                <h2>Grade-<span ></span></h2>
                <h2>Total-<span ></span></h2>
            </div>
        </div>
        <div >
            <div >
                <input type="number" id="c" placeholder="c programming">
                <input type="number" id="mt" placeholder="maths">
                <input type="number" id="ph" placeholder="php">
                <input type="number" id="ja" placeholder="java">
                <input type="number" id="csa" placeholder="computer system architecture">
                <button type="button" onclick="show_result()">Show Result</button>
                
            </div>
        </div>
        <div >
            <h2></h2>

        </div>
        <div >
            <div >
                <div ></div>

            </div>
        </div>
        
    </div>

    <!-- Js script -->
    <script src="fifth.js"></script>
</body>
</html>