Faça funcionar!
Lição 11 de 11 do curso Barra de Progresso Circular | Projeto Front-end da Coddy.
Aqui entenderemos a lógica do código JavaScript, como ele girará um círculo e a contagem de porcentagem.
(As dicas contêm todas as soluções, mas tente fazer sozinho primeiro e depois você pode conferir as dicas.)
Como lembrete,
Para selecionar um componente:
let component = document.querySelector(".some-class");Para atualizar o texto de um componente:
component.textContent = "new-text"Para atualizar o estilo de um componente:
component.style.background = "#fff"Desafio
Fácil- Primeiramente, temos que selecionar ambas as classes:
circular-progresseprogress-value. Além disso, temos que armazenar três valores individuais, que são o valor inicial, o valor final e a velocidade. - Todos os processos precisam de uma função que deve ser chamada em uma velocidade específica e, para isso, precisamos usar a função setTimeout.
- Clique em atualizar na página da web.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>Todas as lições de Barra de Progresso Circular | Projeto Front-end
1Introdução
O que você vai criar?4JavaScript
Faça funcionar!