Skip to content
Submitted over 3 years ago

Vanilla JS/HTML solution to the Clock App

Etienne L.•95
@etnlmy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clock app
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello Everybody

This was a fun challenge and it took me longer than expected, as usual, lol. I went for a Vanilla JS/HTML solution.

I ran into some issues when deploying, as one of the API (worldtimeapi) does not support HTTPS. Since the calls have to be made directly from the client, and therefore cannot be proxied, I used another API instead (TimezoneAPI.io).

If you give it a try and notice some issues with the location and/or time data, please let me know.

Any other more general feedback is greatly appreciated 😀

Thanks!

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Great work Etienne

    One thing that in my opinion needs attention is on the Day of the week which has a value of 0 (as it is a sunday) . That of course is a direct result from the api where the days are from 0 up to 6 . I would prefer the first day of the week to be 1 and the last day of the week to be 7.

    Happy coding.

    Marked as helpful
    2
    Etienne L.•95
    @etnlmyPosted over 3 years ago

    @ChamuMutezva thanks for your feedback! That's a good point, I will use a 1-based system instead.

    0
  • atanasov36•640
    @AtanasovCodePosted over 3 years ago

    Amazing job Etienne!

    One thing I did notice is when clicking on "more" to display the additional information, the button becomes inverted so when all the info is shown, the buttons displays "more" and when all the info is hidden the button displays "less"

    Marked as helpful
    1
    Etienne L.•95
    @etnlmyPosted over 3 years ago

    @AtanasovCode thanks for your feedback 😀. You're right, I changed the logic last minute and I didn't realize that I has inverted the logic for the label.

    1
  • Liam R•425
    @Cooly-o-CatsPosted over 3 years ago

    Nice! The only thing I would suggest is to update the timezone label, when it shows the time. So 8:30 AM bst or 8:30 AM cst or even 8:30 AM AKDT.

    Marked as helpful
    1
    Etienne L.•95
    @etnlmyPosted over 3 years ago

    @Cooly-o-Cats thanks for your feedback 😀 You're right, I should use the right format depending on the location (12 vs 24).

    0

Please log in to post a comment

Log in with GitHub

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