Making a simple clock webpage for A-

| geek, parenting

We've been working on making our routines smoother by scheduling meals, clean-up time, bedtime routines, and so on. Even though times vary from day to day to accommodate the variability of toddler life, it's been helpful to say things like, “Evening snack is at 8.”

The wall clock in the kitchen has a big circle on the end of the hour hand, which has been great for helping A- tell the time. She can focus on what number is in or near the circle instead of figuring out which is the short hand, mentally extending it to the numbers, and seeing out which number it matches. 

This morning, A- looked at the clock and said, “It's nine o'clock.” (And it was!) In the evening, she looked at the clock a few minutes before 8 PM, then started singing, “We've come to the end of another day…”

Since that wall clock is just in the kitchen, I wanted to make something on my phone so that I could always show her what time it was. Javascript to the rescue! This one seems to display fine. If I need to use it offline, I can probably bundle in the libraries.

Live version is at https://sachachua.com/clock.html, based on Vasco Asturiano's MIT-licensed code.

Next step could be to add drawings to the clock, like this custom clock for toddlers.

We'll shift to the classic style of clock hands over time so that she can practise those too. I've also started talking about “half past,” and then I'll introduce “quarter to” and “quarter past” later on. Whee! It's so much fun to code things that fit A-‘s interests.

You can comment with Disqus or you can e-mail me at sacha@sachachua.com.