Hi I hope your having a great day, I just got into React and I was trying to convert my old codes to React but the things is my old codes were Jquery and I'm having a hard time on converting it to Vanilla Javascript.

Here's my old code:

function progress() {
    var windowScrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var progress = (windowScrollTop / (docHeight - windowHeight)) * 100;

    var bgColor = progress > 99 ? "#fff" : "#fff";
    var textColor = progress > 99 ? "#fff" : "#333";

    $("h1").text(Math.round(progress) + "%").css({ color: textColor });

    $(".fill").height(progress + "%").css({ backgroundColor: bgColor });
}

progress();

What I've done so far:

let progress = () => {
    let windowScrollTop = window.onscroll;
    let docHeight = document.offsetHeight;
    let windowHeight = window.offsetHeight;
    let progress = (windowScrollTop / (docHeight - windowHeight)) * 100;

    let bgColor = progress > 99 ? "#fff" : "#fff";
    let txtColor = progress > 99 ? "#fff" : "#333";      

    document.querySelector("h1").innerHTML = Math.round(progress) + "%";     
    document.querySelector("h1").style.color = bgColor;
            
    document.querySelector(".fill").innerHTML = Math.round(progress) + "%";    
    document.querySelector(".fill").style.color = txtColor;         
}

progress();

Lastly the Math.round() display NaN

I'm really sorry for all the trouble I hope you could help me with my problem. Thank you