TypeScript Tutorial: Building a Simple Interactive Pomodoro Timer

Written by

learnmodernjavascript

in

In the fast-paced world of software development, productivity can be a constant struggle. We’re often juggling multiple tasks, battling distractions, and striving to meet deadlines. One effective technique to combat these challenges is the Pomodoro Technique, a time management method that breaks work into focused intervals, traditionally 25 minutes in length, separated by short breaks. This tutorial will guide you through building a simple, interactive Pomodoro timer using TypeScript, empowering you to boost your productivity and stay focused.

Understanding the Pomodoro Technique

Before we dive into the code, let’s briefly recap the Pomodoro Technique. It’s a straightforward approach:

  • Choose a task to work on.
  • Set a timer for 25 minutes (a “Pomodoro”).
  • Work on the task until the timer rings.
  • Take a short break (5 minutes).
  • After every four “Pomodoros,” take a longer break (20-30 minutes).

The key is focused work followed by structured breaks. This helps maintain concentration, prevents burnout, and allows your mind to refresh. Now, let’s bring this technique to life with TypeScript.

Setting Up Your TypeScript Project

First, you’ll need to set up a basic TypeScript project. If you’re new to TypeScript, don’t worry! We’ll walk through the essential steps.

  1. Initialize a new project: Open your terminal and navigate to your desired project directory. Run the following command to initialize a new Node.js project and create a package.json file: 
    npm init -y
  2. Install TypeScript: Next, install TypeScript as a development dependency: 
    npm install --save-dev typescript
  3. Create a TypeScript configuration file: Generate a tsconfig.json file to configure TypeScript compilation. Run: 
    npx tsc --init

    This command creates a tsconfig.json file with default settings. You can customize these settings later, but the defaults are a good starting point.

  4. Create your main TypeScript file: Create a file named index.ts in your project directory. This is where we’ll write the code for our Pomodoro timer.

Building the Core Timer Logic

Now, let’s write the core logic for the Pomodoro timer. We’ll start with the basic timer functionality: setting a time, counting down, and handling breaks. Here’s the code, with detailed comments to explain each step:


// index.ts

// Define the timer duration in seconds (25 minutes = 1500 seconds)
const workDuration = 25 * 60;
const shortBreakDuration = 5 * 60;
const longBreakDuration = 20 * 60;

// State variables
let timeLeft: number = workDuration;
let timerInterval: number | null = null;
let isRunning: boolean = false;
let pomodoroCount: number = 0;
let timerType: 'work' | 'shortBreak' | 'longBreak' = 'work';

// DOM elements (we'll assume you have these in your HTML)
const timerDisplay = document.getElementById('timer') as HTMLSpanElement | null;
const startStopButton = document.getElementById('startStopButton') as HTMLButtonElement | null;
const resetButton = document.getElementById('resetButton') as HTMLButtonElement | null;
const timerTypeDisplay = document.getElementById('timerType') as HTMLSpanElement | null;

// Function to format time in MM:SS format
const formatTime = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(remainingSeconds).padStart(2, '0');
  return `${formattedMinutes}:${formattedSeconds}`;
};

// Function to update the timer display
const updateTimerDisplay = () => {
  if (timerDisplay) {
    timerDisplay.textContent = formatTime(timeLeft);
  }
};

// Function to update the timer type display
const updateTimerTypeDisplay = () => {
    if (timerTypeDisplay) {
        timerTypeDisplay.textContent = timerType.charAt(0).toUpperCase() + timerType.slice(1);
    }
};


// Function to handle the countdown
const countdown = () => {
  if (timeLeft > 0) {
    timeLeft--;
    updateTimerDisplay();
  } else {
    clearInterval(timerInterval!); // Use non-null assertion
    isRunning = false;
    pomodoroCount++;
    switchTimerType();
  }
};

// Function to switch between work and break timers
const switchTimerType = () => {
    if (timerType === 'work') {
        if (pomodoroCount % 4 === 0) {
            timerType = 'longBreak';
            timeLeft = longBreakDuration;
        } else {
            timerType = 'shortBreak';
            timeLeft = shortBreakDuration;
        }
    } else {
        timerType = 'work';
        timeLeft = workDuration;
    }
    updateTimerTypeDisplay();
    updateTimerDisplay();
    if (isRunning) {
        startTimer(); // Restart the timer after switching
    }
};

// Function to start the timer
const startTimer = () => {
  if (!isRunning) {
    isRunning = true;
    timerInterval = setInterval(countdown, 1000);
    if (startStopButton) {
        startStopButton.textContent = 'Stop';
    }
  }
};

// Function to stop the timer
const stopTimer = () => {
  if (isRunning) {
    isRunning = false;
    clearInterval(timerInterval!); // Use non-null assertion
    if (startStopButton) {
        startStopButton.textContent = 'Start';
    }
  }
};

// Function to reset the timer
const resetTimer = () => {
    stopTimer();
    timeLeft = workDuration;
    pomodoroCount = 0;
    timerType = 'work';
    updateTimerTypeDisplay();
    updateTimerDisplay();
};

// Event listeners for the buttons
if (startStopButton) {
    startStopButton.addEventListener('click', () => {
        if (isRunning) {
            stopTimer();
        } else {
            startTimer();
        }
    });
}

if (resetButton) {
    resetButton.addEventListener('click', resetTimer);
}

// Initial display update
updateTimerDisplay();
updateTimerTypeDisplay();

Let’s break down the key parts:

  • Variables: We define variables for the timer duration (workDuration, shortBreakDuration, longBreakDuration), the remaining time (timeLeft), the interval ID (timerInterval), a boolean indicating if the timer is running (isRunning), a counter for pomodoros (pomodoroCount), and the current timer type (timerType).
  • DOM Elements: We select the HTML elements that will be updated by the timer. We assume you have a timer display (timerDisplay), a start/stop button (startStopButton), a reset button (resetButton), and a timer type display (timerTypeDisplay) in your HTML.
  • `formatTime` Function: This function takes the remaining seconds and formats them into a MM:SS string.
  • `updateTimerDisplay` Function: This function updates the timer display in the HTML with the formatted time.
  • `updateTimerTypeDisplay` Function: This function updates the timer type display in the HTML.
  • `countdown` Function: This is the heart of the timer. It decrements timeLeft every second. When timeLeft reaches 0, it clears the interval and triggers the switch to the next timer type.
  • `switchTimerType` Function: This function handles the logic for switching between work, short break, and long break timers, based on the `pomodoroCount`.
  • `startTimer` Function: This function starts the timer by setting an interval that calls the countdown function every second.
  • `stopTimer` Function: This function stops the timer by clearing the interval.
  • `resetTimer` Function: This function resets the timer to its initial state, stopping it, setting the time to the default work duration, and resetting the pomodoro count.
  • Event Listeners: We add event listeners to the start/stop and reset buttons to trigger the corresponding functions when clicked.

Creating the HTML Structure

Now, let’s create a simple HTML structure to host our timer. Create an index.html file in the same directory as your index.ts file. Here’s a basic example:


<!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>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #timer {
      font-size: 3em;
      margin: 20px 0;
    }
    button {
      font-size: 1.2em;
      padding: 10px 20px;
      margin: 0 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Pomodoro Timer</h1>
  <span id="timerType">Work</span>
  <div id="timer">25:00</div>
  <button id="startStopButton">Start</button>
  <button id="resetButton">Reset</button>
  <script src="index.js"></script>
</body>
</html>

This HTML provides the basic structure: a title, a timer display, start/stop and reset buttons, and a script tag to include our compiled JavaScript file (index.js). Make sure the script tag points to the correct compiled JavaScript file.

Compiling and Running the Code

Before you can run the timer, you need to compile your TypeScript code into JavaScript. Use the TypeScript compiler (tsc):

tsc

This command reads your tsconfig.json file and compiles the index.ts file into index.js. If you haven’t changed the default settings in tsconfig.json, the compiled JavaScript will be in the same directory as your TypeScript file. Open index.html in your web browser. You should see the timer display, and you can start, stop, and reset the timer. The timer will count down, and you can test the break functionality.

Adding Visual Enhancements (Optional)

To make the timer more user-friendly, you can add some visual enhancements. Here are a few ideas:

  • Color Changes: Change the background color or timer text color to indicate the timer type (work, short break, long break).
  • Sound Notifications: Play a sound when the timer finishes a work session or a break.
  • Progress Bar: Add a progress bar to visually represent the remaining time.
  • Customization Options: Allow users to customize the work and break durations.

Here’s how you could implement a simple color change based on the timer type. Add this to your index.ts file:


// Inside the updateTimerTypeDisplay() function, add the following:
const updateTimerTypeDisplay = () => {
    if (timerTypeDisplay) {
        timerTypeDisplay.textContent = timerType.charAt(0).toUpperCase() + timerType.slice(1);
        if (timerType === 'work') {
            timerTypeDisplay.style.color = 'green';
        } else if (timerType === 'shortBreak' || timerType === 'longBreak') {
            timerTypeDisplay.style.color = 'blue';
        }
    }
};

And add the following to your CSS in index.html (or in a separate CSS file): 


/* Add this to your CSS */
#timerType {
    font-size: 1.2em;
    margin-bottom: 10px;
}

Now, the timer type display will change color based on the timer type. You can adapt this to change the background color of the timer display or other elements.

Error Handling and Common Mistakes

When building any application, error handling is crucial. Here are some common mistakes and how to fix them in your Pomodoro timer:

  • Incorrect DOM Element Selection: If you get an error that says “Cannot read properties of null (reading ‘textContent’)”, it means one of your DOM selections (e.g., document.getElementById('timer')) returned null. This happens when the element with the specified ID doesn’t exist in your HTML. Double-check your HTML to make sure the IDs match and that the elements are correctly placed. You can also use optional chaining (document.getElementById('timer')?.textContent) to prevent errors if the element isn’t found.
  • Uninitialized Variables: Make sure you initialize all your variables before using them. TypeScript helps catch these errors, but if you’re not using TypeScript’s strict mode, you might miss them.
  • Incorrect Time Formatting: Ensure your time formatting function correctly handles single-digit minutes and seconds. Use padStart(2, '0') to add a leading zero if needed.
  • Interval Issues: Make sure to clear the interval when stopping the timer (clearInterval(timerInterval!)). Also, ensure the interval ID is correctly stored and used. Use the non-null assertion operator (!) to tell the compiler you are sure that the value is not null or undefined.
  • Button Event Listeners Not Working: Double-check that your event listeners are correctly attached to the buttons. Make sure the buttons are correctly selected using document.getElementById() and that you’re not missing any typos in your code.
  • TypeScript Compilation Errors: If you encounter TypeScript compilation errors, carefully read the error messages. They often provide valuable clues about what’s wrong (e.g., type mismatches, missing properties). Use the TypeScript compiler’s error messages to guide you in fixing the problem.

Advanced Features and Further Improvements

Once you have a working Pomodoro timer, you can explore more advanced features:

  • User Customization: Allow users to set their own work, short break, and long break durations.
  • Sound Notifications: Add sound notifications at the end of each Pomodoro and break.
  • Progress Bar: Implement a progress bar to visually represent the remaining time.
  • Persistent Storage: Save user settings and Pomodoro history to local storage.
  • Integration with Task Management: Connect the timer to a task management system.
  • Theme Options: Allow users to choose different themes or color schemes.
  • Keyboard Shortcuts: Implement keyboard shortcuts for starting, stopping, and resetting the timer.
  • Responsive Design: Ensure the timer looks good on different screen sizes.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned how to set up a TypeScript project, define variables, use functions, handle DOM elements, and work with event listeners.
  • Pomodoro Technique: You’ve implemented a practical application of the Pomodoro Technique, helping you manage time more effectively.
  • Code Organization: The code is well-structured and commented, making it easy to understand and maintain.
  • Error Handling: You’ve learned about common errors and how to fix them.
  • Extensibility: You have a solid foundation to build upon and add more advanced features.

Frequently Asked Questions (FAQ)

Here are some frequently asked questions about the Pomodoro Technique and this timer:

  1. What is the Pomodoro Technique? The Pomodoro Technique is a time management method that involves working in focused intervals (Pomodoros) typically 25 minutes long, followed by short breaks.
  2. Why use a Pomodoro timer? A Pomodoro timer helps you stay focused, reduce distractions, and improve productivity. It also prevents burnout by encouraging regular breaks.
  3. Can I customize the timer durations? Yes, you can modify the workDuration, shortBreakDuration, and longBreakDuration variables in the code to customize the timer durations.
  4. How do I add sound notifications? You can add sound notifications by using the Web Audio API or the <audio> element in HTML. Play a sound when the timer reaches 0.
  5. How can I make the timer more visually appealing? You can add color changes, a progress bar, and other visual enhancements using CSS and JavaScript.

Building this Pomodoro timer is a great way to learn TypeScript and improve your productivity. You can adapt and expand this project to suit your own needs. The principles of clear code organization, error handling, and incremental development are applicable to a wide range of projects. Remember, the most effective way to learn is by doing, so experiment with different features, and don’t be afraid to make mistakes – that’s how you learn and grow as a developer. This project serves as a starting point. Feel free to customize and extend it to meet your specific needs and preferences. Happy coding, and happy Pomodoro-ing!

More posts