Menu
Coddy logo textTech

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"
challenge icon

Desafio

Fácil
  1. Primeiramente, temos que selecionar ambas as classes: circular-progress e progress-value. Além disso, temos que armazenar três valores individuais, que são o valor inicial, o valor final e a velocidade.
  2. 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. 
  3. 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