Skip to content
Submitted over 4 years ago

Clock App Using React + CSS (Flexbox, Web-First Solution)

Vanessa Martin•155
@vsm1996
A solution to the Clock app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Woohoo! Another solution complete! 😄 This one was a bit intimidating, but once I sunk my teeth in, it was a blast! 😍 Please feel free to give me any suggestions, as I had difficulty with placement. I also feel like some of my logic could be a lot cleaner.

Three things I plan on implementing are:

  1. making this a pwa (mostly for my own enjoyment)
  2. adding transitions for the disappearing quote/appearing extra details
  3. Initial loading screen to give APIs time to send data

Happy Coding! ✨🍃

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Greetings, Vanessa Martin! 👋

    Nice to see you complete another challenge! 😀 Nice job on this one! 👏

    I think you set the height of the background to 100vh or something, which is not a bad idea, but on desktop screens where you have to scroll to reach some of the information, the background doesn't cover the bottom portion of the screen. Adding min-height: 100vh instead of height: 100vh to div.root should take care of that problem! 😉

    Keep coding (and happy coding, too)! 😁

  • Amir Jacobs•165
    @Amir-Jacobs

    Looks great! I love that you put the CSS files with the corresponding component -- before this I'd have it under ./src/css.

    The only thing I'd change is I'd use functional components.

  • Adham Ali•85
    @adhamali450

    Couldn't be more perfect!

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