Menu
Coddy logo textTech

Заставь это работать!

Урок 11 из 11 курса Круговой прогресс-бар | Front-end проект на Coddy.

Здесь мы разберем логику кода JavaScript: как он будет вращать круг и вести подсчет процентов.

(В подсказках есть все решения, но сначала попробуйте сделать это самостоятельно, а затем можете заглянуть в подсказки.)

Напоминаем,
Чтобы выбрать компонент:

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

Чтобы обновить текст компонента:

component.textContent = "new-text"

Чтобы обновить стиль компонента:

component.style.background = "#fff"
challenge icon

Задание

Легко
  1. Во-первых, нам нужно выбрать оба класса: circular-progress и progress-value. Также нам нужно сохранить три отдельных значения: начальное значение, конечное значение и скорость.
  2. Для всех процессов требуется функция, которая должна вызываться с определенной скоростью, и для этого нам нужно использовать функцию setTimeout
  3. Нажмите кнопку обновления на веб-странице.

Попробуйте сами

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

Все уроки раздела Круговой прогресс-бар | Front-end проект