Submitted over 1 year ago
Advice generator with React, Sass and Axios
@RicardoFuentes437
Design comparison
SolutionDesign
Solution retrospective
What do you guys think about the responsiveness? What do you think about the visual aspect of the page? does it look good? What are some practices that you think can be improved?
Community feedback
- @akpekigPosted over 1 year ago
- It's mostly responsive except for when the browser width is under 900px and the advice text is a little longer than usual. Then it overflows past the divider.
- It looks really great! The glow on the button is particularly appealing. It would be nice to see this when the button is focused on too, as well as a hidden span text to say what the button does or an aria-label.
- I guess because you're getting each piece of advice from an API, there's a bit of a delay between clicking the button and displaying the gotten advice. This delay lets you click the button repeatedly but doesn't really do anything during that time, so it feels stuck. I'd suggest having some user feedback during this delay, whether that's disabling the button until the data is gotten or changing the symbol to a loading one.
- Your code largely uses a
advice === null
conditional, when null is a falsy value. Rather than "advice === null", you can just use!advice
. - Furthermore, the classes don't change based on this conditional. Save yourself some lines of code by putting the conditional inside a single element.
- You import a processed CSS file into your component, but you're using Sass and React components. Why not take advantage of this amazing tech combo and import the Sass file directly?
Overall, really close to the designs and mostly comprehensive code so great work!!
Marked as helpful0@RicardoFuentes437Posted over 1 year ago@akpekig Hello, thank you for the feedback and your recomendatios/suggestions, they sound like good ideas, i'll do my best to implement them, thank you again :)
1
Please log in to post a comment
Log in with GitHubJoin 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