If you’re like me, you have a few devices that you’re really not using any longer. You paid good money for them and it seems a waste (and maybe ecologically unsound) to toss them. So they clutter up a drawer or a shelf and you think maybe you’ll organize photos into a slide show someday.
What if you converted them into clocks? Who doesn’t need another clock after all? And you could make different kinds of clocks, just for fun. Maybe even add in an API to display a random quote or the weather.
To begin this project I used a Project Boilerplate I’ve been working on. Because I want my projects to match my branding, I’ve set up an HTML5 Boilerplate with my colors and some boilerplate CSS to give me a headstart on setting up my Flexbox grid. I’m hoping it helps me get started with a project more quickly.
The first version of the project is a simple clock. Just the time and copyright. Then I took out the copyright so it was Just a Clock. And now I’ve made a version that fetches from Luke Peavey’s Quotable REST API.
I started by adding the clock itself. There are plenty of sites that have some sample code. After looking over a few, I mostly used the JS from Geek for Geeks version (there’s a tiny typo in their code – one of the variables is misspelled) with some customization. I prefer template literals and I didn’t want a “0” in front of the hours 1 – 9.
Next, I worked on the styling. I have all I need in the project boilerplate I’m using to create a light and dark mode. 👍 Choosing the font is always “fun” for me. At least using css variables makes it easier to switch out. 🙂 And I wanted the time to be HUGE – taking up the entire screen.
When I started on the Quote version, I wanted to allow the time and quote to be side-by-side in landscape mode. This resulted in more than the usual number of finicky media queries. I might go back and look at them again to be even more specific. The portrait width of some devices is the landscape width of others. This may not be a big issue and I’ll want to see the clocks on different devices before I worried about it too much more.
Getting the quote to update was kind of fun. I wanted to fetch from the API when the page loaded and update once per day. But I didn’t want to wait a day to see if it would work. 😆 I called the function to fetch from the API and then used setInterval to call the function every 86400000 milliseconds. I left options to fetch once/hour and once/minute in comments.
I might try using a few different APIs. A weather API or image API could be fun. If I use an image, maybe it’s part of the background with the time over it with a glassine background? Who knows – we’ll see where it goes. I definitely want to add a version that also displays that day of the week and date. I think it would be super helpful. And I may look up how to make the site go full-screen so you only see the clock and not the browser toolbar.
Have a look at the repo (linked above) and, if you like it, a star would be appreciated! ⭐