Skip to content
Submitted almost 4 years ago

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

Vanessa Martin•155
@vsm1996
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

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! ✨🍃

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    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)! 😁

    3
    Vanessa Martin•155
    @vsm1996Posted almost 4 years ago

    Hi APG!

    Thank you for your suggestion! I absolutely had difficulty with the height of the container either not reaching the bottom or being too large, so this is incredibly helpful. When you say div.root, do you mean div w/ id="root"? (apologies, still learning vernacular) If so, I'm on it!

    Thank you again!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @vsm1996

    Hi, Vanessa! Sorry for the (very) late reply. 😅 By div.root I mean div with a class of root. It's a quick way to write out <div class="root"></div> if you're using Emmet (a tool that can help you write HTML and CSS so much faster). In Emmet, div.root would be expanded to <div class="root"></div> while div#root would be expanded to <div id="root"></div>. Just think of the way you'd select those elements using CSS and remembering those shortcuts becomes a lot easier. 😉

    1
    Vanessa Martin•155
    @vsm1996Posted almost 4 years ago

    @ApplePieGiraffe Hi APG! No worries, thank you so so much for answering. This makes loads of sense and I will add this as soon as I can.

    1
  • Amir Jacobs•165
    @Amir-JacobsPosted almost 4 years ago

    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.

    1
    Vanessa Martin•155
    @vsm1996Posted almost 4 years ago

    Thank you! I only thought about using Hooks about mid-way through 😅 Next time, perhaps!

    0
  • Adham Ali•85
    @adhamali450Posted almost 4 years ago

    Couldn't be more perfect!

    1
    Vanessa Martin•155
    @vsm1996Posted almost 4 years ago

    Thank you so much!

    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