I have built a digital clock with random quotes using HTML, CSS, and JAVASCRIPT. I need your review of the work and the code.
Quite good, honestly, for a beginner project. I’m nitpicking, but your code is a bit overcommented in some points. Basically, your code is simple enough in most spots that you don’t need to document exactly what’s being done. It’s self-documenting, in other words. Reserve comments for complicated actions and sections.
Also, while the difference would technically be too minor to see even on the seconds, getting a new Date() object for each variable will technically return 3 different variables with very minor differences in time. You could instead initialize a single time variable and use the get methods on that variable. For example:
const time = new Date()
const hour = time.getHour()
...
In this way, you get the same time for each element. Also, I believe there’s a minor bug when the time is around midnight because the getHour() method returns 0 as the hour for midnight, but you’d want to show 12 since it’s a 12-hour clock. Add a check for when hour is 0 and you should be good to go.
For accessibility reasons, your font colours should contrast a bit better with their backgrounds. For that matter, since it’s a clock, I’m not sure you need to have a header or subtitles for each element of the current time. But if you were doing so just for practice, that’s no problem.
Finally, you can refactor your setTimeout function to just look like: setTimeout(updateClock, 1000)
Maybe for an additional challenge, you could implement a selector for a few different time zones.
It does what advertises well.
If you want to take it to the next level, I’d suggest using an API for the quotes so that you can have access to a massive database.
In terms of style, I would suggest using a higher resolution image for the background, and to try to improve the contrast of the elements to make them easier and more pleasant to read.