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

Reactjs, CSS

#react
Ibrohim 210

@Ibrohim2001

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Currently I'm learning ReactJS and this is one of the projects I've built. If you any suggestion, feedback let me know, please

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @Ibrohim2001, You've done really well for someone new to React. I am a beginner myself and here are a few things I think you could improve:

  1. You didn't need to create the divider. FEM has provided a divider pattern as an SVG(in your img directory), you're better off using that.

  2. Your app will not generate any advice on Firefox. This happens because of the default caching behavior on all browsers. You can fix this by adding fetch(API_URL, { cache: 'no-cache' } ) in your fetch method.

  3. Initally your advice card is empty on load. It is good practice to set temporary placeholders, rather than empty strings.

Hope this helps :)

1

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