The other day I read an article about someone who made a clock using literary quotes and an old Kindle. Which inspired me to see about building something similar as a web page. Thanks to the provided spreadsheet of quotes and some handy Google Spreadsheet tools, I soon had a JSON file that could be easily parsed in Angular.After some quick work using Angular and Google App Engine I ended up with LitClock. Still very much a work in progress. I will be adding new quotes as often as I can and updating the code along the way. For now feel free to checkout the repo on Bitbucket.
How it works It is quite simple really, every second I check the time and compare it with a json file to find out if there is a quote to match. If so, I display it and if not I simply display the time. Some timestamps have multiple quotes available. On each page view I shuffle the collection in order to make the experience more dynamic. Cool Code Snippets From an Angular point of view I am not doing anything ground breaking yet. One cool feature that I got working recently is auto deployment using Bitbucket Pipelines. Have a look at the repo at the pipelines file to see how it works.
Want to add the clock to your website? I’ll eventually make it “embeddable” via a WordPress block but for now you can use an iframe. Here is a quick code snippet to get you started:
<iframe src="https://literary-clock.appspot.com" style="width:100%;height:200px;margin:2rem auto;display:block;" frameBorder="0"></iframe>Cheers!