작동하게 만들기!

Coddy의 원형 프로그레스 바 | 프론트엔드 프로젝트 코스 레슨 — 11개 중 11번째.

여기에서 자바스크립트 코드의 로직, 원을 회전시키는 방법, 그리고 백분율 카운트에 대해 이해해 보겠습니다.

(힌트에 모든 솔루션이 포함되어 있지만, 먼저 직접 시도해 본 다음 힌트를 확인해 보세요.)

참고로,
컴포넌트를 타겟팅하려면:

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>