JavaScript Timer With Start Stop Pause Button

This JavaScript code provides a simple timer with start, stop/pause, and reset functionalities. The timer displays minutes and seconds, and you can easily start, stop, or reset the timer using the corresponding buttons. It uses JavaScript to handle the timer logic and updates the display accordingly.

Whether you’re building a productivity app, a workout routine tracker, or an online quiz with time limits, this timer can be easily customized and implemented to suit your specific needs. This timer code is particularly useful for projects that require time tracking, countdowns, or any scenario where you need to display and manage elapsed time.

How to Create JavaScript Timer With Start Stop Control

1. First of all, load the Bootstrap CSS by adding the following CDN link into the head tag of your HTML document. (Optional)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2. Create the HTML structure for the timer interface as follows:

<div class="jumbotron text-center">
  <div class="timer">
    <span class="minutes">
      00
    </span>
    :
    <span class="seconds">
      00
    </span>
  </div>
  <div class="time-buttons">
    <button class="btn btn-lg btn-success" data-action="start">
      Start
    </button>
    <button class="btn btn-lg btn-danger" data-action="stop">
      Stop
    </button>
    <button class="btn btn-lg btn-link btn-block" data-action="reset">
      Reset
    </button>
  </div>
</div>

3. You can define CSS styles for the timer according to your needs.

.timer {
  font-size: 80px;
}
.time-buttons button{
   /* Button style goes here */
}

4. Finally, add the following JavaScript timer function to your project:

const btnStartElement = document.querySelector('[data-action="start"]');
const btnStopElement = document.querySelector('[data-action="stop"]');
const btnResetElement = document.querySelector('[data-action="reset"]');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');
let timerTime = 0;
let interval;


const start = () => {
  isRunning = true;
  interval = setInterval(incrementTimer, 1000)
}

const stop = () => {
  isRunning = false;
  clearInterval(interval);
}

const reset = () => {
  minutes.innerText = '00';
  seconds.innerText = '00';
}

const pad = (number) => {
  return (number < 10) ? '0' + number : number;
}

const incrementTimer = () => {
  timerTime++;
  
  const numberMinutes = Math.floor(timerTime / 60);
  const numberSeconds = timerTime % 60;
  
  minutes.innerText = pad(numberMinutes);
  seconds.innerText = pad(numberSeconds);
}

btnStartElement.addEventListener('click', startTimer = () => {
  start();
});

btnStopElement.addEventListener('click', stopTimer = () => {
  stop();
});

btnResetElement.addEventListener('click', stopTimer = () => {
  reset();
});

The timer updates every second (1000 milliseconds) by default. If you want it to update more frequently or less frequently, you can change the interval value in the setInterval function. For instance, to update the timer every half-second, change setInterval(incrementTimer, 1000) to setInterval(incrementTimer, 500).

That’s it! hopefully, you have successfully created Javascript Timer with a start stop/pause button. If you have any questions or suggestions, feel free to comment below.