Make it work!

Lesson 11 of 11 in Coddy's Circular Progress Bar | Front-end Project course.

Here we will understand the logic of javascript code, how it will rotate a circle, and the percentage count.

(The hints have all the solutions, but try it yourself first, and then you may check the hints.)

As a reminder,
To target a component:

let component = document.querySelector(".some-class");

To update the text of a component:

component.textContent = "new-text"

To update the style of a component:

component.style.background = "#fff"

Challenge

Easy

Firstly, we have to target both classes: circular-progress and progress-value. Also, we have to store three individual values, which are the start value, the end value, and the speed.
All the processes need a function that must be called at a specific speed, and for that, we need to use the setTimeout function.
Click on refresh on the webpage.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>