Reponsive advice generator app with React and Sass

Community feedback

• 

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 2 years ago

  Gratz on finishing the project!

  As a piece of advice you could wrap it around a <main> tag instead of `<div id="root">' so your structure is more semantic.

  Also maybe add cursor:pointer to your button instead of the img since if you click on the button it still activates but there's no pointer indicating that unless you hover over the img itself

  I would avoid using position: absolute to position your divs, as if you do that in a actual page, it will be hard to make it responsive, so to center you could instead fo something like

  #root {
  height: 100vh;
  }
  
  .outside-card {
  display: grid;
  place-item: center;
  }
  

  Happy coding!

  Marked as helpful

  3

  ---

  

  Daniela Darnea•180

  @mdanieladlaPosted over 2 years ago

  @LucianoDLima thank you for the feedback :) The display:grid .... on the outside-card doesn't work, that's why finally I have used position (though I know is not the best option)

  0
• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Great this is almost identical well done 🎉

  One important tip:

  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 ==> advice-generator/src/services/api.js

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

  Hope this is helpful and have a nice time coding 🤩

  Marked as helpful

  2

  ---

  

  Daniela Darnea•180

  @mdanieladlaPosted over 2 years ago

  @devmor-j thank you!! It really helped because I didn't knew what was the problem on firefox! :)

  1