Cronômetro Funcional

Lição 9 de 10 do curso Cronômetro - Projeto HTML/CSS/JS da Coddy.

Agora que temos os botões de iniciar e parar funcionando, é hora de começar a contagem!

Para contar, usaremos uma função JavaScript chamada setInterval:

const interval = setInterval(func, milliseconds)

A função recebe dois argumentos: uma função e um número representando milissegundos. A função é chamada a cada intervalo de milissegundos fornecido.

Então, por exemplo:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

No exemplo acima, aumentamos a variável count em 1 a cada segundo.

Se você quiser parar um intervalo, use clearInterval com o valor de retorno de setInterval:

const interval = setInterval(updateCount, 1000)
clearInterval(interval)

Desafio

Médio

Adicione o seguinte suporte ao seu arquivo JS:

Assim que o botão start/stop for clicado, defina um intervalo que atualizará o texto do cronômetro a cada segundo em um, certifique-se de que ele esteja formatado corretamente.
Assim que o botão start/stop for clicado novamente, limpe o intervalo em execução.

Depois de adicionar um setInterval ao seu código, você precisará clicar no botão de reset na visualização 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>