Clock app challenge with React and SCSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 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)! 😁

  1

  ---

  

  Guy Ezra•615

  @ezraguyPosted almost 4 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.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 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! 👍

  1
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 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 :-)

  1

  ---

  

  Guy Ezra•615

  @ezraguyPosted almost 4 years ago

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

  1