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

Advice generator built with Vite.js

#fetch#vite#tailwind-css

@ninaokumura

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

Community feedback

Devmor 470

@devmor-j

Posted

Awesome 😍 looks good and well written. Though I guess there is a small bug that prevents fetching new advice on Firefox browsers. I had the same problem and that was related to cache procsss. Hopefully this bug is fixed by adding {cache: 'no-store'} option to your fetch call like so:

const response = await fetch(adviceApiUrl, {cache: 'no-store'});

Though some styles are customized and diverge from the requested design like font-familiy and color contrast but overall looks pretty good. Btw I really liked that loading cube 😁 Have fun coding, cheers.

Marked as helpful

0

@ninaokumura

Posted

@devmor-j I fixed it with your suggestion 🙂 Thanks a lot for your feedback! And btw, the loading cube is from react-spinners-kit.

Happy coding 💻

1
Devmor 470

@devmor-j

Posted

@ninaokumura Nice, I will try react-spinners-kit in my next react project thank you.

0
Michael 430

@mikester380

Posted

Hey coder! I love your solution. I think you should also hide the advice ID until the advice has finished loading before display it.

0

@ninaokumura

Posted

@mikester380 good catch! Issue fixed, thanks for your feedback. 😀

0
Michael 430

@mikester380

Posted

@ninaokumura you're welcome. And about the accessibility issues, the button for generating the advice should have something the screen readers can read out for visually impaired people. Add an aria-label="generate advice" attribute to the button to fix the issue and click on generate new report to generate a new report

0

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