Skip to content
Submitted over 2 years ago

Advice Slip using ReactJS and Styled Components

Melvin•270
@MelvinMelonGit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi there! Thanks for viewing my solution :)

I'm still very unfamiliar with React and styled components.

  1. May I know how should I refactor my code to follow best practices?

  2. Currently, the user can still click the button while the fetch function is still running. It takes a few seconds before the user can change the advice again. I tried coming up with a load function to set the cursor to initial while the fetch is running, but decided against it because the cursor turns back to pointer before the next fetch function can run. What can I do to sync the cursor pointer to the loading time of the data?

  3. What would be the best way to scale the card? By putting padding in the body, or using max-width on the card component itself?

Appreciate your advice. Thanks again! :)

Community feedback

  • Bryan Sanchez•590
    @0-BSCodePosted over 2 years ago

    Hi! Really great work😃 Regarding your first question, I'd suggest creating a separate directory for each of your components so that they're easier to organize. In this folder, you can create one directory for each component used in your project and you can place the code and styling for said component here. You can read more about it here. Cheers! 🎉

    Marked as helpful
    1
    Melvin•270
    @MelvinMelonGitPosted over 2 years ago

    @0-BSCode

    Thanks Bryan for your comment! Will improve on it for my next project😀

    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