Fallo funzionare!

Lezione 11 di 11 del corso Barra di avanzamento circolare | Progetto front-end di Coddy.

Qui capiremo la logica del codice JavaScript, come ruota un cerchio e il conteggio percentuale.

(I suggerimenti contengono tutte le soluzioni, ma prova prima da solo e poi puoi consultare i suggerimenti.)

Come promemoria,
Per selezionare un componente:

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

Per aggiornare il testo di un componente:

component.textContent = "new-text"

Per aggiornare lo stile di un componente:

component.style.background = "#fff"

Sfida

Facile

Per prima cosa, dobbiamo selezionare entrambe le classi: circular-progress e progress-value. Inoltre, dobbiamo memorizzare tre valori distinti, ovvero il valore iniziale, il valore finale e la velocità.
Per tutti i processi serve una funzione che deve essere chiamata a una velocità specifica e, per farlo, dobbiamo usare la funzione setTimeout.
Fai clic su aggiorna nella pagina web.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi il codice HTML qui -->
        <script src="script.js"></script>
    </body>
</html>