HIIT Workout Tracker


I wanted to have a timer I could use to do high intensity inverval training. The application I created also proved to be helpful for tracking other workouts and even other tasks that required being completed in an interval.

Technologies Used

The following technologies were used to build this tool:

  • HTML5
  • CSS3
  • JavaScript
  • PHP
  • MySQL


Initiate Workout Form

Used to set up the workout session times including:

  • Warm-up time
  • Cool-Down time.
  • Number of intervals.
  • Length of Intense portion of workout intervals.
  • Length of Recovery portion of workout intervals.
  • The ability to switch between Minutes and Seconds when setting times
  • An option to turn on a sound to be played to indicate portions of intervals and end of workout.
  • Buttons to Start the workout or Reset the workout settings to their original state.
Screen to initialize workout
Initiate Workout Screen

View of Clock during Warm-Up

The clock displays:

  • The workout status, "Workout in Progress".
  • A message to the person working out, "Warm up and get limber!"
  • Time left and total time for the Warm-Up portion of the workout.
  • Total time left in the workout and the total time of workout.
  • An option to turn on a sound to be played to indicate portions of intervals and end of workout.
  • Buttons to pause and cancel the workout.
  • The start time of the workout and a spot to display the end time, when the workout is complete.
Warm-Up screen
Warm-Up Countdown

View of Clock during an Intense Portion of an Interval

In addition to the details available during Warm-Up, the clock also displays:

  • The interval count.
  • The type of interval: Intense or Recovery.
Intense Interval screen
Intense Interval Countdown

View of Clock during a Recovery Portion of an Interval

Recovery Interval screen
Recovery Interval Countdown

View of Clock during Cool-Down

The image below shows how the clock looks when the workout is paused. Some things to note are:

  • Status is changed to: "Workout Paused"
  • The count downs stop until the workout is resumed.
  • The Pause button is replaced by a Resume button.
Cool-Down screen
Cool-Down Countdown

View of Clock Displayed at Completion of Workout

Things to note about this view of the clock:

  • Status message: "Workout Complete!"
  • Message of affirmation to the person for completing the workout.
  • "Workout Complete" message in the top counter.
  • Top counter shows the same time for elapsed and total time.
  • Bottom counter shows no time remaining and the total time.
  • The Pause/Resume button has been replaced with the Back button.
  • The Cancel button has been disabled.
  • The End Time has been added to the bottom of the clock.
Workout completed screen
Workout Complete