Tutorial

Multiple Timers Web App

10 steps

In this tutorial, we will be making a multi-timer application where the users will be able to set multiple timers and each timer will be able to run independently. We will use setInterval() to countdown, and each timer object the user creates will contain key properties like the current time, original time set, and the current state. Each timer object will be stored in an array.

Join us on Discord

Learning Outcomes

By the end of this tutorial, you will be able to:

  1. Manipulate Objects and display them within the DOM
  2. Use Anonymous Functions and the Math Module to format numbers and time

Tutorial Steps

Total steps: 10

  • Step 1: What Are Anonymous Functions
  • Step 2: What is the Math Module in JavaScript?
  • Step 3: Time to Start Coding!
  • Step 4: Structuring Our Web App (HTML)
  • Step 5: Adding the HTML Elements
  • Step 6: Adding Styling to Our Website
  • Step 7: Adding Logic
  • Step 8: Adding Button Controls
  • Step 9: Final Main Loop
  • Step 10: Checking Your Work
Help Center Need help?

Find articles to support you through your journey or chat with our support team.

Help Center