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 app

Nada Elhosaryβ€’ 230

@NadaElho

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


Is it possible to receive feedback from your community?

Community feedback

Travolgi πŸ•β€’ 31,420

@denielden

Posted

Hello Nada, You have done a good work! 😁

Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • use blockquote tag to wrap the card and improve the Accessibility but not as a container of that one element
  • also you can use article tag instead of a simple p for the advise
  • instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help πŸ˜‰ and Happy coding!

Marked as helpful

2
Md5 daltonβ€’ 1,430

@md5dalton

Posted

Greetings Nada Elhosary πŸ‘‹

Congratulations on completing this challenge. I also enjoyed working on it, especially fetching and using the data from the API.

You may have noticed that in firefox browser there's an issue where no new advice is fetched even if you keep pressing the dice. This is due to the fact that the browser is caching the previous response, so to prevent this, you can add a "no cache" option to your fetch function: fetch(url, { cache: "no-cache" }). This will ensure a great user experience for everyone using your app regardless of which browser they are using.

Another minor thing I noticed in your HTML markup is you implemented responsive images with the picture element and that is greatπŸ‘, however, you included <source media="(max-width: 520px)" srcset="images/pattern-divider-mobile.svg"> and this is redundant since <img src="images/pattern-divider-mobile.svg"/> loads the same image. You can remove it and your code will work perfectly fine.

Hopefully that helps improve your project πŸ‘Œ

Marked as helpful

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