Çalışmasını sağla!

Coddy'nin Dairesel İlerleme Çubuğu | Front-end Projesi kursunda ders 11 / 11.

Burada JavaScript kodunun mantığını, bir daireyi nasıl döndüreceğini ve yüzde sayımını anlayacağız.

(İpuçları tüm çözümleri içerir, ancak önce kendiniz deneyin ve ardından ipuçlarını kontrol edebilirsiniz.)

Bir hatırlatma olarak,
Bir bileşeni hedeflemek için:

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

Bir bileşenin metnini güncellemek için:

component.textContent = "new-text"

Bir bileşenin stilini güncellemek için:

component.style.background = "#fff"

Görev

Kolay

Öncelikle, her iki sınıfı da hedeflememiz gerekiyor: circular-progress ve progress-value. Ayrıca, başlangıç değeri, bitiş değeri ve hız olmak üzere üç ayrı değeri saklamamız gerekiyor.
Tüm işlemlerin belirli bir hızda çağrılması gereken bir fonksiyona ihtiyacı vardır ve bunun için setTimeout fonksiyonunu kullanmamız gerekir.
Web sayfasında yenile düğmesine tıklayın.

Kendin dene

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