Advice generator with React, Sass and Axios

Community feedback

• 

  Gabriel Duraye•445

  @baldwinboy

  Posted about 2 years 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!!

  01

  Marked as helpful