اجعله يعمل!

الدرس 11 من 11 في دورة شريط تقدم دائري | مشروع واجهة أمامية على Coddy.

هنا سنفهم منطق كود جافا سكريبت، وكيف سيقوم بتدوير دائرة، وحساب النسبة المئوية.

(تحتوي التلميحات على جميع الحلول، ولكن جربها بنفسك أولاً، ثم يمكنك التحقق من التلميحات.)

للتذكير،
لاستهداف مكون:

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

لتحديث نص مكون:

component.textContent = "new-text"

لتحديث نمط مكون:

component.style.background = "#fff"

التحدي

سهل

أولاً، يجب علينا استهداف كلا الفئتين: circular-progress و progress-value. كما يجب علينا تخزين ثلاث قيم فردية، وهي قيمة البداية، وقيمة النهاية، والسرعة.
تحتاج جميع العمليات إلى وظيفة يجب استدعاؤها بسرعة محددة، ولذلك، نحتاج إلى استخدام وظيفة setTimeout.
انقر فوق تحديث في صفحة الويب.

جرّب بنفسك

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