When I was setting up my home office last year I was on the hunt for a nice, simple clock for my desk. Something easy to read, but unobtrusive. As ever, I was quite picky and didn't manage to find anything that matched what I wanted so I started thinking about what I could make.
I considered briefly going big and hooking up a Raspberry Pi to a spare monitor. But decided against it, partly because it would have been huge and partly because I'm using the Raspberry Pi as a local DNS server.
I had a couple of old iPhones, accumulated from family members which I thought I could use to display the time. I tried a few existing websites and looked at a few apps on the App Store, but nothing have the style I was looking for. So I put together a simple web page with some vanilla JS to display the current time.
The code behind it is pretty simple too. Some basic CSS for the style and some vanilla JavaScript to get the time and update it. In just 69 lines of code and an hour or so (it could easily be less, but meh, I faffed a lot on the style) I'd made exactly what I was after.
One thing that confused for a while initially was that the clock wasn't updating. I forgot I had to tell it to update.
setInterval(function(){
displayTime();
}, 250);This bit of code calls the function displayTime every 250ms, often enough to keep the displayed time in sync with the actual time.
Also, you might have noticed in the screenshot that the URL is http://ti.me – no, I don't own that domain. I've faked it, so that any device connected to my home network can use that URL and get my custom clock. This is why I have a Raspberry Pi set up as a DNS server, well not just for this clock site but so I can use arbitrary URLs for internal projects.