#1 Pomodoro Timer (React.js) - Advent of JS

1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/1-pomodoro-timer

Live Demo: 01 - Pomodoro || Advent of JavaScript

Preview:

with the progress bar, stop and restart

Requirements:

We’re creating a Pomodoro timer.
Start the timer by clicking on the start link/button.
Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop.
Click on the gear icon to change the length (minutes and seconds) of the timer.
Once the timer finishes, the ring should change from green to red and an alert message is passed to the browser.
Extra features:
- Validate and format the user’s inputs.
- Show a progress bar when the timer is clicking.

References:

2. Breakdown

Pomodoro Timer structure:

<div class="wrapper">
  <div class="ring">
    <svg width="518" height="518" viewBox="0 0 518 518">
      <circle stroke-width="9px" x="0" y="y" cx="259" cy="259" r="254" />
    </svg>
  </div>
  <div class="timer">
    <div class="time">
      <div class="minutes">
        <input type="text" value="15" disabled />
      </div>
      <div class="colon">:</div>
      <div class="seconds">
        <input type="text" value="00" disabled />
      </div>
    </div>
    <button class="start">start</button>
    <button class="settings">
      <img src="images/gear.svg" alt="Settings" />
    </button>
  </div>
</div>

Let’s break down the objects one by one.

We’re creating a Pomodoro timer.

The first two variables we need are minute & second. They are used to display the countdown and to store the user’s inputs.

Some examples (ex: Infinite Pomodoro App in React) use only these two to track the time. But I feel it will be a hassle to convert them every time, so I am going to use another variable totalSecond to do the actual countdown.

Logic between minute, second, and totalSecond:

totalSecond = minute * 60 + second
minute = totalSecond // 60
second = totalSecond % 60

When the timer clicks start, totalSecond will be initialized with the values of minute & second. Then an interval will be created to make totalSecond = totalSecond - 1 every second. The timer finishes when totalSecond == 0.

When the state of totalSecond changes, re-render minute & second as well.

Start the timer by clicking on the start link/button.

Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop.

An isClicking variable will be created to track whether the timer is clicking or not.

It should be a boolean variable.
isClicking == false when the timer finishes or is paused.
isClicking == true when the timer is clicking.
false should be the default value since we don’t want the timer to automatically start clicking.
isClicking can be manually toggled by clicking start/stop.
isClicking is set to false when totalSecond reaches 0.

Click on the gear icon to change the length (minutes and seconds) of the timer.

Another boolean variable isSetting is used to toggle the setting mode.

When isSetting == false, disable inputs.
When isSetting == true, enable inputs by removing the disabled attribute.
Once the user enters a value, store the value in minute/second. Those values will later be used to reset totalSecond.
The user should not be able to reset the timer if it is still clicking, which means isSetting can only be true when the timer is paused. It will be set to false once the timer restarts.

Once the timer finishes, the ring should change from green to red and an alert message is passed to the browser.

When isClicking == false, class .ending is added to the ring to make it red. When isClicking == true, class .ending is removed.

When totalSecond reaches 0, an alert will be triggered.

Validate and format the user’s inputs.

Let’s put up some restrictions:

Only numbers are allowed to be entered. If nothing or any non-numeric character has been typed into the input boxes, set the value to 0.
The input’s maximum length is 2.
If minute, second < 10, use extra 0 to fill in the empty space (ex: 1:0 → 01:00).
The maximum value the timer can show is 99:59. If the user’s input exceeds it (ex: 99:99), the maximum is set instead.
isClicking cannot be toggled back to true if the timer remains 00:00.

Show a progress bar when the timer is clicking.

This can be achieved by dynamically updating the SVG circle’s stroke-dashoffset.

See more: Building a Progress Ring, Quickly

3. Start coding

Setup React template

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="./styles.css" />

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div class="wrapper" id="wrapper"></div>
    <script type="text/babel" src="./script.js"></script>
  </body>
</html>

This is a simple practice project that comes with starter files, so we can simply import React and Babel using CDN.

Please be aware that this approach is fine for learning and creating simple demos but is not suitable for production.

script.js:

const { useState, useEffect } = React;

const App = () => {
  return (
    <>
        <div className="ring">
            <svg width="518" height="518" viewBox="0 0 518 518">
            <circle strokeWidth="9px" x="0" y="y" cx="259" cy="259" r="254" />
            </svg>
        </div>
        <div className="timer">
            <div className="time">
            <div className="minutes">
                <input type="text" value="15" disabled />
            </div>
            <div className="colon">:</div>
            <div className="seconds">
                <input type="text" value="00" disabled />
            </div>
            </div>
            <button className="start">start</button>
            <button className="settings">
            <img src="images/gear.svg" alt="Settings" />
            </button>
        </div>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("wrapper"));

React CDN does not automatically import useState and useEffect, so we need to do it by ourselves on top of the codes.

Then we can copy & paste the whole .wrapper element into the App component. Remember to format all attributes into camelCased (class → className, stroke-width → strokeWidth).

Create and set variables

const App = () => {
  const [minute, setMinute] = useState("01");
  const [second, setSecond] = useState("00");

  const inputSecond = parseInt(minute) * 60 + parseInt(second);
  const maxSecond = 99 * 60 + 59;

  const [totalSecond, setTotalSecond] = useState(
    inputSecond > maxSecond ? maxSecond : inputSecond
  );

  const [isClicking, setIsClicking] = useState(false);
  const [isSetting, setIsSetting] = useState(false);
  ...
}

Since minute & second are strings, we need to cast them to int before initializing inputSecond with them. After that, compare inputSecond and maxSecond (99:59), then assign the correct value to totalSecond.

As the timer clicking, minute & second should re-render every time totalSecond changes to display the correct time. We can use useEffect here and format the values with padStart():

useEffect(() => {
  setMinute(
    Math.floor(totalSecond / 60)
      .toString()
      .padStart(2, "0")
  );
  setSecond((totalSecond % 60).toString().padStart(2, "0"));
}, [totalSecond]);

As mentioned in React document, setState() does not immediately mutate the state but creates a pending state transition. Accessing the state right after this method is called can potentially return the previous value. The useEffect hook here guarantees minute & second will be updated with the correct value.

Build the setting feature

As mentioned above, the user can only edit the inputs (aka the timer) when the timer is paused, which means isSetting can only be true when the timer is paused:

const clickSetting = () => {
  if (!isClicking) {
    setIsSetting(true);
  }
};

return (
	...
	<button className="settings" onClick={clickSetting}>...</button>
	...
);

In order to enable editing of the input element, an onChange event handler is required to synchronize the change of minute/second.

Since only numbers are allowed to be entered, we will remove all non-numeric characters, and if no number is left, set the value to 0:

const changeMinute = (e) => {
  const value = e.target.value.replace(/\D/g, "");
  setMinute(value.length > 0 ? value : 0);
};

const changeSecond = (e) => {
  const value = e.target.value.replace(/\D/g, "");
  setSecond(value.length > 0 ? value : 0);
};

return (
	...
	<div className="time">
    <div className="minutes">
      <input
        type="text"
        value={minute}
        onChange={changeMinute}
        disabled={!isSetting}
        maxLength="2"
      />
    </div>
    <div className="colon">:</div>
    <div className="seconds">
      <input
        type="text"
        value={second}
        onChange={changeSecond}
        disabled={!isSetting}
        maxLength="2"
      />
    </div>
  </div>
	...
);

Then we setup the start/stop button:

const clickButton = () => {
  if (isSetting) {
    setTotalSecond(inputSecond > maxSecond ? maxSecond : inputSecond);
	setIsSetting(false);
  }
  if (totalSecond > 0) {
    setIsClicking((isClicking) => !isClicking);
  }
};

return (
	...
	<button className="start" onClick={clickButton}>
        {isClicking ? "stop" : "start"}
    </button>
	...
);

When the user clicks start again after setting a new timer, a new value will be assigned to totalSecond, and isSetting will be set to false to disable editing.

When there is still time remains, the user can pause and restart the timer by clicking the stop/start button.

If the timer reaches 00:00, it cannot be restarted until the user enters a value greater than 0.

Setup the timer

When the timer starts, an interval should be set to perform the countdown.

Using setInterval in a React Component with hooks can be tricky. In short, it is imperative to clear the scheduled interval once the component unmounts. One way to do it is to add return () => clearInterval(interval) at the end of the useEffect hook. (See more: setInterval in React Components Using Hooks)

useEffect(() => {
  const interval = setInterval(() => {
    if (totalSecond === 0) {
      clearInterval(interval);
      alert("Ding!");
    } else if (isClicking) {
      setTotalSecond((totalSecond) => totalSecond - 1);
    }
  }, 1000);
  return () => clearInterval(interval);
}, [isClicking]);

useEffect(() => {
  ...
  if (totalSecond === 0) {
    setIsClicking(false);
  }
}, [totalSecond]);

When the state of isClicking changes, an interval is created.

If the timer is clicking (isClicking == true), do the countdown.

If the timer is not clicking (isClicking == false), do nothing.

If totalSecond reaches 0, set isClicking to false, clear the interval, then push an alert to the browser.

Add a progress bar

Tutorial: Building a Progress Ring, Quickly

return (
	...
	<div className={isClicking ? "ring" : "ring ending"}>
	  <svg width="518" height="518" viewBox="0 0 518 518">
	    <circle
	      strokeWidth="9px"
	      x="0"
	      y="y"
	      cx="259"
	      cy="259"
	      r="254"
	      strokeDasharray="1595.12 1595.12"
	      style={{
	        strokeDashoffset:
	          totalSecond == 0 || targetSecond == 0
	            ? 0
	            : 1595.12 * (1 - totalSecond / targetSecond),
	      }}
	    />
	  </svg>
	</div>
	...
);

Since only the stroke-dashoffset attribute needs to be dynamically updated, we can hard-code other values into the codes.

And as we need to calculate the percentage, another variable targetSecond is created to store the initial value of totalSecond. (Semantically, targetSecond should be the totalSecond, but whatever…)

const [targetSecond, setTargetSecond] = useState(0);

useEffect(() => {
  ...
  if (totalSecond === 0) {
    ...
    setTargetSecond(0);
  }
}, [totalSecond]);

const clickButton = () => {
  if (isSetting) {
    setTargetSecond(inputSecond > maxSecond ? maxSecond : inputSecond);
    ...
  }

  if (totalSecond > 0) {
    ...
    setTargetSecond((targetSecond) =>
      targetSecond > 0
        ? targetSecond
        : inputSecond > maxSecond
        ? maxSecond
        : inputSecond
    );
  }
};

When the timer is paused (isClicking == false, totalSecond > 0), targetSecond will not be reset.

1. Overview#

2. Breakdown#

3. Start coding#

Setup React template#

Create and set variables#

Build the setting feature#

Setup the timer#

Add a progress bar#