Advice Generator App Using React

Community feedback

• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Hey! Well-written and professional that is your solution. If interested in some suggestions here we can make 2 easy fixes:

  1️⃣ As report says each image should have alt attribute. But what if the image is for decoration purposed only!? Then specs suggest that leave alt as empty string; This way, screen readers and robots will know this image has no context and is just for decoration.

  That being said simply add alt="" to all decorative images:

  inside ==> src/components/advice-card.jsx

  <img alt="" className='advice-card_container_card_advice-border-desktop' src={process.env.PUBLIC_URL + '/images/pattern-divider-desktop.svg'}/>
  
  <img alt="" className='advice-card_container_card_advice-border-mobile' src={process.env.PUBLIC_URL + '/images/pattern-divider-mobile.svg'}/>
  

  2️⃣ Right now this app might not fetch new advice on Firefox browsers because they rely on cache and we have to enforce the browser to call API service on each user request.

  This can be easily done by adding {cache: 'no-store'} option to our fetch service like so:

  inside ==> src/services/advice-service.js

  await fetch('https://api.adviceslip.com/advice', {cache: 'no-store'}).then(async (response)=> {
                      response.json().then((advice) => {
                          resolve(advice)
              })
  

  Great! Hope these are helpful and have a nice time coding 🤩

  Marked as helpful

  1

  ---

  

  Noha M.•415

  @NohaFahmiPosted over 2 years ago

  @devmor-j Thank you so much for your feedback, I applied your suggestion and will update my solution with them :)

  1
• 

  Kehinde•660

  @jonathan401Posted over 2 years ago

  I love the animation 😇

  1