Toddler Timer

A timer inspired by my toddler, who is too young to tell the time.
2021

Toddler Timer

A timer inspired by my toddler, who is too young to tell the time. I wanted a timer that would display a visual percentage used of the total time, rather than a traditional base-60 clock. This timer features large numbers that count down, helping my child to develop an understanding of what various durations feel like in minutes.

One of several projects undertaken to refresh my knowledge of vanilla JavaScript.

View project live

Key Features

  • Interactive countdown clock with customisable time settings and alarm function
  • Basic DOM manipulation
  • Event listeners for handling user interactions
  • Use of setInterval and clearInterval to manage the timer countdown
  • Responsive CSS

Technologies

  • JavaScript (Vanilla)
  • HTML
  • CSS

Todo

  • Improve accuracy by using timestamps and requestAnimationFrame method for a JavaScript timer
  • Prevent display sleep by integrating NoSleep Library
  • Improve UX by updating button colours based on their current state