JSFiddle - React, Tailwind, and code Playground

by SnehalKadwe

HTML

<html>
  <head>
    <title>30 min countdown timer</title>
    <script src="main.js" defer></script>
  </head>
  <body>
    <h1>CountDown Timer</h1>
    <div style="margin-bottom:40px;">
      <input type="number" placeholder="minutes" id="mintuess">
      <input type="number" placeholder="seconds" id="seconds">
    </div>
    <div>
      <span class="count-digit">3</span>
      <span class="count-digit">0</span>
      <span class="separator">:</span>
      <span class="count-digit">0</span>
      <span class="count-digit">0</span>
    </div>
    <div class="options">
      <button id="stop-timer">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
      </button>
      <button id="start-timer">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
      </button>
      <button id="reset-timer">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
      </button>
    </div>
    <audio id="alarm_audio"></audio>
  </body>
</html>

CSS

body {
  font-family: monaco;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1 {
  margin-bottom: 50px;
}
.count-digit {
  color: #ffffff;
  background-color: #333;
  font-size: 56px;
  padding: 10px 20px;
  text-shadow: 0 1px 0 white;
  border-radius: 10%;
}
.separator {
  font-size: 56px;
}
.options {
  margin-top: 50px;
  display: flex;
  gap: 30px;
}

JavaScript

// Select Every Count Container
const countContainer = document.querySelectorAll(".count-digit");

// Select option buttons
const startAction = document.getElementById("start-timer");
const stopAction = document.getElementById("stop-timer");
const resetAction = document.getElementById("reset-timer");

// Select HTML5 Audio element
const timeoutAudio = document.getElementById("alarm_audio");

// Default inital value of timer
let mini = document.getElementById("mintuess").value;
const defaultValue = 2 * 60;

// variable to the time
var countDownTime = defaultValue;

// variable to store time interval
var timerID;

// Variable to track whether timer is running or not
var isStopped = true;

// Function calculate time string
const findTimeString = () => {
  var minutes = String(Math.trunc(countDownTime / 60));
  var seconds = String(countDownTime % 60);
  if (minutes.length === 1) {
    minutes = "0" + minutes;
  }
  if (seconds.length === 1) {
    seconds = "0" + seconds;
  }
  return minutes + seconds;
};

// Function to start Countdown
const startTimer = () => {
  if (isStopped) {
    isStopped = false;
    timerID = setInterval(runCountDown, 500);
  }
};

// Function to stop Countdown
const stopTimer = () => {
  isStopped = true;
  if (timerID) {
    clearInterval(timerID);
  }
};

// Function to reset Countdown
const resetTimer = () => {
  stopTimer();
  countDownTime = defaultValue;
  renderTime();
};

// Initialize alarm sound
timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
timeoutAudio.load();

// Attach onclick event to buttons
startAction.onclick = startTimer;
resetAction.onclick = resetTimer;
stopAction.onclick = stopTimer;

// Function to display coundown on screen
const renderTime = () => {
  const time = findTimeString();
  countContainer.forEach((count, index) => {
    count.innerHTML = time.charAt(index);
  });
};

// function to execute timer
const runCountDown = () => {
  // decement time
  countDownTime -= 1;
  //Display...