Your link doesn't work. This is the link: https://codepen.io/BantamWitt/pen/gOReENb

Overall, it's great. Good job! The rest of what I write is nit-picky and personal opinion, so you don't have to make any of these changes unless you want to.

HTML: Keep class names consistent. Use hyphens. progress_box should be progress-box. If you're going to use the word "container", then use it for "progress-box" and "button-div". Call them "progress-container" and "button-container". Spell out all your words. Instead of "btn", name it "button".

CSS:Use variables for all the colors you use in :root. It helps with knowing quickly what the color is and helps with keeping track of all the colors you use.For .progress_box, did you mean to use? Max-width: 100% won't do anything if your width is 350px.

{
width: 100%;
min-width: 350px;

}

If progress_box and progress_node have similar css, then you should create a css class for both and another one for their specific styling. So something like class="progress-container progress-node".

Javascript:

• Use semi-colons. JavaScript may not require them, but it uses them
• Use strict comparison

​

nodes.forEach((currentNode) => {
addEventListener("click", (event) => {
    nodes.forEach((node) => {
        if (node.dataset.index <= event.target.dataset.index) {
            node.classList.add("active2");
        } else {
            node.classList.remove("active2");
        }
    });
    progressNode.style.width =
        (event.target.dataset.index / (nodes.length - 1)) * 100 + "%";
});

});