Advice Generator

Community feedback

• 

  P

  Elyse Kanagaratnam•300

  @elyyysePosted about 1 year ago

  Hi, Jonfernando - Your project looks great! And your API call is clear and easy to read.

  You mentioned media queries — if you're taking a mobile first approach (meaning all of your CSS above the media query is your mobile design), then I think you want to switch your media query to read: min-width: 600px. So all of your styling applies to a smaller screen, and then as soon as the viewport hits 600px or wider, the styles wrapped in the media query will apply.

  One other thing you might consider — right now, the only way to get a new bit of advice is to hard refresh the whole page. If you add a click event listener to the big green button, you can re-call the API when a user clicks it.

  // wrap your fetch() call in a function
  function generateAdvice () {
       // API call goes here   
  }
  
  // call it once on page load
  generateAdvice();
  
  // call it again whenever the button is clicked
  bigGreenBtn.addEventListener('click', generateAdvice);
  

  I hope this all makes sense. Feel free to reply back if anything is unclear.

  1