Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@vsm1996

Desktop design screenshot for the Clock app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

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

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

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

@vsm1996

Posted

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
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@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

@vsm1996

Posted

@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

Posted

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

@vsm1996

Posted

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

0
Adham Ali 85

@adhamali450

Posted

Couldn't be more perfect!

1

@vsm1996

Posted

Thank you so much!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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