Faites-le fonctionner !

Leçon 11 sur 11 du cours Barre de progression circulaire | Projet Front-end de Coddy.

Ici, nous allons comprendre la logique du code JavaScript, comment il fera tourner un cercle, et le décompte du pourcentage.

(Les indices contiennent toutes les solutions, mais essayez d'abord par vous-même, puis vous pourrez consulter les indices.)

Pour rappel,
Pour cibler un composant :

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

Pour mettre à jour le texte d'un composant :

component.textContent = "new-text"

Pour mettre à jour le style d'un composant :

component.style.background = "#fff"

Défi

Facile

Premièrement, nous devons cibler les deux classes : circular-progress et progress-value. De plus, nous devons stocker trois valeurs individuelles, qui sont la valeur de début, la valeur de fin et la vitesse.
Tous les processus nécessitent une fonction qui doit être appelée à une vitesse spécifique, et pour cela, nous devons utiliser la fonction setTimeout.
Cliquez sur rafraîchir sur la page web.

Essayez vous-même

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