JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pomodoro Timer</title>
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0.0/dist/tailwind.min.css">
  <script src="https://cdn.jsdelivr.net/npm/gauge-chart/dist/gauge-chart.min.js"></script>
  <style>
    #time-display {
      font-size: 24px;
      color: #333;
      text-align: center;
    }
  </style>
</head>

<body class="flex justify-center items-center h-screen">
  <div id="time-display"></div>

  <div class="mt-4 flex items-center">
    <input id="work-time" type="number" min="1" value="25" class="mr-2 p-2 text-center w-16">
    <span class="mr-2">Work Time (mins)</span>
    <input id="rest-time" type="number" min="1" value="5" class="mr-2 p-2 text-center w-16">
    <span>Rest Time (mins)</span>
  </div>

  <button id="start-button" class="mt-4 p-2 bg-blue-500 text-white hover:bg-blue-700 rounded">Start</button>

  <script src="script.js"></script>
</body>

</html>

JavaScript

let workTime = 25;
let restTime = 5;
let timerInterval;
let currentTime;
let isWorkTime = true;
let gauge;

function setWorkTime(value) {
  workTime = parseInt(value, 10);
}

function setRestTime(value) {
  restTime = parseInt(value, 10);
}

function updateTimerDisplay() {
  const timeDisplay = document.getElementById('time-display');
  timeDisplay.textContent = `${Math.floor(currentTime / 60).toString().padStart(2, '0')}:${(currentTime % 60).toString().padStart(2, '0')}`;

  if (gauge) {
    const percentage = (currentTime / (isWorkTime ? workTime * 60 : restTime * 60)) * 100;
    gauge.update({ value: percentage });
  }
}

function startTimer() {
  const totalTime = isWorkTime ? workTime * 60 : restTime * 60;
  let elapsedTime = 0;

  timerInterval = setInterval(() => {
    currentTime = totalTime - elapsedTime;
    updateTimerDisplay();

    if (elapsedTime >= totalTime) {
      clearInterval(timerInterval);
      isWorkTime = !isWorkTime;
      startTimer();
    }

    elapsedTime++;
  }, 1000);
}

document.getElementById('start-button').addEventListener('click', () => {
  const startButton = document.getElementById('start-button');
  if (startButton.innerText === 'Start') {
    startButton.innerText = 'Pause';
    if (!gauge) {
      gauge = new GaugeChart(document.getElementById('time-display'));
      gauge.render();
    }
    startTimer();
  } else {
    startButton.innerText = 'Start';
    clearInterval(timerInterval);
  }
});

document.getElementById('work-time').addEventListener('input', (event) => {
  setWorkTime(event.target.value);
});

document.getElementById('rest-time').addEventListener('input', (event) => {
  setRestTime(event.target.value);
});