Clock app

Hey everyone! Here’s my post-op for this app:

Design: For this project, I deviated from the design a little bit and focused on getting it DONE instead of 1:1. Got pretty close though compared to the screenshot :-) The Figma file was a huge time-saver.

• There was a tenacious ios bug where showing the details shelf will also shift the background image up. In the end, I had to give the background a dedicated div and not nest any other div in it. Painful. I did learn how to hook up my phone directly on the computer and edit the CSS in mobile Safari right then and there to troubleshoot.

• I used classes to change the bg image from day to night and vice-versa. Putting a default image causes a flash of the default image on load before CSS and JS is applied, and I didn’t want that. I feel like there’s a better way than using classes though. Any suggestions?

JS: Oi. Where do I begin

• I prefer the 12-hour format, so I naturally needed more JS for am/pm and to convert the hour

• The quotes API stopped working in the middle of the project, so I had to find an alternative. Main criteria: served over https. I couldn’t find the documentation for the one that I picked, so not sure it was a wise choice. Also as a result, I had to write a random index generator for the quotes array. Plus, the quotes are not specific to programming.

• Tons of CORS error with the time API. In fact, it’s still happening at time of submission. User may need to hit refresh to have a chance at getting the data. I tried adding the cors-anywhere link when making the call but it didn’t solve the issue. Would appreciate any feedback on this.

• It was suggested to use an API to set the time, but I opted to use the more reliable Date object for hours and minutes. Telling time is at the heart of the app, and if anything else, it will at least do that and not rely on the API which may or may not work.

• I initially used Promise.all for making the requests. While it worked fine, it takes a good while for all promises to resolve especially if one (or more) is holding it up. In the end, I refactored to separate calls. I was making a duplicate call for the random quote event listener anyway if I remain on the Promise.all route. Is separating the requests the right way to do it?

Other questions I asked myself: innerHTML or textContent? How to handle the headings in the design - the h2 will be larger than h1? How to make html more accessible?

TODOs: Fix readme, refactor based on comments, maybe refactor layout scss since it’s a bit long, and write about all of this!

Thank you for reading this far! Any suggestions/comments/resources on my code and life decisions lol are welcome below :-)