Bring es zum Laufen!

Lektion 11 von 11 im Kurs Kreisförmiger Fortschrittsbalken | Frontend-Projekt von Coddy.

Hier werden wir die Logik des JavaScript-Codes verstehen, wie er einen Kreis dreht und den Prozentsatz zählt.

(Die Hinweise enthalten alle Lösungen, aber versuche es zuerst selbst und sieh dir dann die Hinweise an.)

Zur Erinnerung,
Um eine Komponente anzusprechen:

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

Um den Text einer Komponente zu aktualisieren:

component.textContent = "new-text"

Um den Stil einer Komponente zu aktualisieren:

component.style.background = "#fff"

Aufgabe

Einfach

Zuerst müssen wir beide Klassen ansprechen: circular-progress und progress-value. Außerdem müssen wir drei einzelne Werte speichern, nämlich den Startwert, den Endwert und die Geschwindigkeit.
Alle Prozesse benötigen eine Funktion, die mit einer bestimmten Geschwindigkeit aufgerufen werden muss, und dafür müssen wir die Funktion setTimeout verwenden.
Klicken Sie auf Aktualisieren auf der Webseite.

Probier es selbst

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