Skip to content
Submitted almost 4 years ago

Responsive Clock App - HTML5, Sass and vanilla JS with APIs

Aliseth•155
@charlottesaidi
A solution to the Clock app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Tried a live clock, don't hesitate to tell if it's buggy or if the time doesn't match where you are (I got the French time here, which is right of course but there's no "zero risk"...). Thank you ;)

Code

Please log in to post a comment

Log in

Community feedback

  • Amon•2,560
    @A-amon

    Hello! Great work~ The responsiveness looks great. And the overlay is a nice touch added to the design.

    I have a few suggestions

    1. The alt text for .greeting is rather generic/vague as it describes both sun & moon icon. I don't think it's important enough to be mentioned to user via screen reader (Considering you have already greeted Good Morning, etc. right after it). So you could either leave the alt empty, aria-hide it or use CSS before selector to display it.

    2. Use button tag for .reload. This will let users know it's a button on screen reader.

    3. Instead of having an extra .background-filter for the overlay, you could use before/after selector.

    4. I think you could use checkbox for More button and style it accordingly. This way, you can show/hide "More" & "Less" text using CSS :checked selector. (Don't take my word for this though)

    5. About JS, the code looks clean and neat. For the adding/removing of one or two class(es), you can consider using toggle method. This will reduce four lines of code to one line (Probably!).

    6. Thanks for reading till here! Since you have already toggled between .day_background and .nighttime_background on body element, I think you could do the rest of the styling using CSS alone without adding/remove classes from its children e.g. greetingIcon, backgroundFilter, etc.

    7. If you do both suggestion no.1 (use before selector for icon) and no.6, you can avoid setting the image src directly on JS, and instead, you could just switch the background image in CSS.

    Marked as helpful
  • Jean•335
    @JeanMieses

    Hey on my desktop, the background is not covering the entire page. It is about 50% width and height as well. Here is an image https://ibb.co/vDKdLmH

    It looks fine on mobile.

    Marked as helpful
  • P
    Haydn Kerr•555
    @haydnkerr

    time looks fine over here in the US :)

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord