Submitted over 3 years ago

Clock app challenge with React and SCSS

Guy Ezra• 615

@ezraguy

Preview site View code

This is a solution for...

Clock app

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback is welcome.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Guy Ezra! 👋

Nice to see you complete another challenge! Good work on this one! 👍

In addition to emestabillo's helpful feedback, I suggest adding the background image as a CSS background image and setting background-size to cover so that the image fills the entire screen but is cropped and doesn't distort when the page is resized. 😉

Keep coding (and happy coding, too)! 😁

Guy Ezra• 615

@ezraguy

Posted over 3 years ago

Hey, @ApplePieGiraffe thank you for the feedback. It's always a pleasure to get feedback from you!. About the background image, I don't think making the background picture as a background image in CSS is the right way to go in this project because of the files I get with this project. I receive a total of 6 images. 3 images of day time (mobile, tablet, and desktop) and 3 images of the night time (mobile, tablet, and desktop). so I have to do calculations to decide the right image (depending on the time of day which I get from the API) and the width of the screen.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@ezraguy

I see—maybe you might be able to change the CSS background image in JS using something like body.style.backgroundImage = src;, but I suppose you could add it to your HTML, too. 😉 Keep it up! 👍

Emmilie Estabillo• 5,540

@emestabillo

Posted over 3 years ago

Hey Guy, works well! Just going to comment on the design:

The refresh button keeps moving depending on the length of the quote it retrieves. The user constantly needs to locate it for subsequent quotes.
Font styles (esp. sizing) could be improved
.more-info is not using its mobile design on smaller widths
For larger screens, the component seem to stretch along with the change of widths. I would try applying a max-width to it
project could use more semantic html as opposed to divs for the most part
Lastly, the clock is not updating (although this is not included in the list of expected behavior)

Hope this helps :-)

Guy Ezra• 615

@ezraguy

Posted over 3 years ago

Hello @emestabillo, thank you for your feedback! you have some good points that I will implement into my project. thanks!

Please log in to post a comment

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