> For the complete documentation index, see [llms.txt](https://iot.datalit.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iot.datalit.de/appendix/ui-features/countdown-timer.md).

# Countdown Timer

A simple countdown timer with start, stop, and restart functionality to display on your web app.

## Add the elements to the website

For the timer example, we add a progress bar along with 3 buttons to set, start and stop the timer. Additionally, we add an input field to enter the seconds the timer should be set to. Note that we give the progress bar the `id="timer"`, so that we can reference it from our JavaScript code below.

The [progress bar](https://getbootstrap.com/docs/4.5/components/progress/), the [input field](https://getbootstrap.com/docs/4.5/components/forms/), and the [buttons](https://getbootstrap.com/docs/4.5/components/buttons/) are part of [Bootstrap](https://getbootstrap.com/) and are ready to use as they are.

```markup
<!-- Elements for the timer -->
<h2>
  Coffee Timer
</h2>

<div class="progress mt-4 mb-4">
  <div
    id="timer"
    class="progress-bar progress-bar-striped progress-bar-animated"
    role="progressbar"
    style="width: 0%"
  ></div>
</div>

<input type="text" class="form-control mb-4" id="setTimerTo" />

<!-- Buttons for the timer -->
 <button class="btn btn-secondary mt-2" onclick="setTimer()">
  Set
</button>

<button class="btn btn-secondary mt-2" onclick="startTimer()">
  Start
</button>

<button class="btn btn-secondary mt-2" onclick="stopTimer()">
  Stop
</button>
```

## Wiring the buttons

### Global variables

For the timer to work, we'll need 3 global variables: The `timerStartedAt` keeps track of what the initial time in seconds was when the timer was started. The variable `timer` keeps track of the current remaining time in seconds and is decreased every second once the timer was started. The variable `timerInterval` holds a reference to the automatic interval that executes every second. We need this reference to stop the interval when someone clicks "Stop".

```javascript
var timerStartedAt;
var timer = 0;
var timerInterval;
```

### Set the timer

To set the timer to a specific value, we connect the button to a function called `setTimer()`, which is implemented as follows:

```javascript
function setTimer() {
  // Get the value from the input field for the time in seconds
  var setTimerTo = document.querySelector('#setTimerTo').value;
  
  timerStartedAt = setTimerTo;
  timer = setTimerTo;
  
  // Stop the timer initially
  stopTimer();
  
  // Set progress bar to 100%
  document.querySelector('#timer').style.width = "100%";
  
  log("Timer set to " + setTimerTo + " seconds. Hit start to countdown.");
}
```

In line 3, we retrieve the value the user has entered. We interpret this value as duration in seconds the timer should count down. When the timer is set, we initialize the two variables `timerStartedAt` and `timer` (time left) with this value. No time has passed yet.

To clear any existing intervals if a timer is currently running, we call `stopTimer()` in line 9.

In line 11, we set the progress bar to 100%, which makes it blue all the way. Since the timer is counting down, the progress bar will become smaller over time instead of bigger.

![](https://2374131584-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVLPynfJbNzVb1G0qYD%2F-MVX0cRysxG3ZO-9znYc%2F-MVX1IGtuU4v0L3z8oAW%2Fcoffee_timer.png?alt=media\&token=eedfda93-66b3-448e-b9a3-9285ff5e570c)

Finally, we log the information that the timer was set to the console (line 14).

### Start the timer

To start the timer, we wire the `startTimer()` function to the corresponding button. The function looks as follows:

```javascript
function startTimer() {
  timerInterval = setInterval(decreaseTimer, 1000);
}
```

The only thing that happens here is the initialization of a 1-second interval that executes the function `decreaseTimer()` every second (1000 ms = 1 second). We store a reference to the interval on the variable `timerInterval`.

The function `decreaseTimer()` looks as follows and takes care of decreasing the timer and updating the progress bar:

```javascript
function decreaseTimer() {
  timer = timer - 1;
  
  if(timer <= 0) {
    stopTimer();

    // Call a function to indicate the timer fires
    timerDone();
  }
  
  // Calculate the relative value
  var progress = Math.round(timer / timerStartedAt * 100);
  
  // Update the progress bar
  document.querySelector('#timer').style.width = progress + "%";
}

```

We first decrease the timer by one in line 2. We then check whether the timer is still greater than zero. If not, we call `stopTimer()` and `timerDone()`. In the latter, we output a message to the console indicating the coffee is ready:

```javascript
function timerDone() {
  log("Time is up! Get your coffee!");
}
```

In line 12 of the `decreaseTimer()` function, we transform the current progress of the timer to a scale between 0 and 100 because that is the number we need for the progress bar. Afterwards, we assign the new width of the progress bar, so that we get a visual update.

![](https://2374131584-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVLPynfJbNzVb1G0qYD%2F-MVX0cRysxG3ZO-9znYc%2F-MVX1NLVEHbVFBc98GpH%2Fcoffee_timer.gif?alt=media\&token=128f3f07-7994-4161-8da8-32083fd2cad3)

### Stop the timer

To pause the timer, the user can click on "Stop" at any time. To resume the user can click "Start" again.