Creating a timer with JavaScript
Tags: timer, javascript, html
Published: 2020-10-19 13:43:52

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/cron%C3%B4metro-em-js-9b440308090)

Let’s create a simple timer using just JavaScript and HTML.

## Code

First we will create the interface, we will do something simple, using only HTML.

```html
<form name="form_main">
  <div>
    <span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>:<span id="millisecond">000</span>
  </div>

  <br />

  <button type="button" name="start">start</button>
  <button type="button" name="pause">pause</button>
  <button type="button" name="reset">reset</button>
</form>
```

In the HTML structure, some `span` was created to display the time information, after that we have 3 buttons to control the functionality of the timer.

Now let’s start the JavaScript part.

```javascript
"use strict";

let hour = 0;
let minute = 0;
let second = 0;
let millisecond = 0;

let cron;

document.form_main.start.onclick = () => start();
document.form_main.pause.onclick = () => pause();
document.form_main.reset.onclick = () => reset();
```

In this JavaScript code, we define our control variables and associate the functions with their buttons.

Now let’s create the functions.

```javascript
function start() {
  pause();
  cron = setInterval(() => { timer(); }, 10);
}

function pause() {
  clearInterval(cron);
}

function reset() {
  hour = 0;
  minute = 0;
  second = 0;
  millisecond = 0;
  document.getElementById('hour').innerText = '00';
  document.getElementById('minute').innerText = '00';
  document.getElementById('second').innerText = '00';
  document.getElementById('millisecond').innerText = '000';
}
```

Here we have the `start`, `pause` and `reset` functions, in the `start` function, we start the `setInterval` every 10 milliseconds (because every 1 millisecond locks depending on the browser).

In the `pause` function we clear the `setInterval`, in the `start` function it is necessary to clear before starting so that we don’t have several working in the background, so before starting the procedures, the `pause` function is called.

In the `reset` function, we reset our auxiliary variables and so that the text on the screen returns to `0(zero)` on the screen, we set it manually using the `innerText`.

```javascript
function timer() {
  if ((millisecond += 10) == 1000) {
    millisecond = 0;
    second++;
  }
  if (second == 60) {
    second = 0;
    minute++;
  }
  if (minute == 60) {
    minute = 0;
    hour++;
  }
  document.getElementById('hour').innerText = returnData(hour);
  document.getElementById('minute').innerText = returnData(minute);
  document.getElementById('second').innerText = returnData(second);
  document.getElementById('millisecond').innerText = returnData(millisecond);
}

function returnData(input) {
  return input > 10 ? input : `0${input}`
}
```

Here we have the final part, the `timer` function which is called in the `start` function, in this function we check the time passed:

* If the `millisecond` added to 10 is equal to 1000, then a second has passed and then we reset the millisecond and increase it by 1 second.
* If the `second` is equal to 60, then a minute has passed and then we reset the second to 1 minute.
* If the `minute` is 60, then an hour has passed and then we reset the minute and increase it by one hour.

Finally we print on the screen using `innerText`.

The `returnData` function is used only to make the text more dynamic on the screen, making the following logic, if the digit is less than 10 then concatenates with a `0(zero)` in front.

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/yLOamWb %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube 2dq5_1vumDI %}
***
## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊