Responsive Advice Generator using HTML, CSS and JavaScript

Community feedback

• 

  Ali Akbar Qasimi•850

  @Ali-Akbar-QasimiPosted over 2 years ago

  first of all you did a great work

  you can make a function that fetch the advice and on the dice listen for a click and run the function that fetch the advice , that way you are not suppose to reload the page , and at the first line of your code you can call that function so that the advice will be fetched at the first also.

  getNewAdvice()

  let dice = document.querySelector('.dice') let header = document.querySelector('.header') let advice = document.querySelector('.advice')

  dice.addEventListener('click',()=>{ getNewAdvice() })

  async function getNewAdvice(){ let response = await fetch('https://api.adviceslip.com/advice') let data = await response.json() console.log(data) header.textContent = 'Advice #' + data.slip.id advice.textContent = data.slip.advice }

  this is how i made it, hope it helped you.

  0

  ---

  

  John Andrey Galingan•180

  @johnrookie-coderPosted over 2 years ago

  @Ali-Akbar-Qasimi thanks for your great feedback. I will try to update this code later and try to implement your suggested solution. Have a great day :)

  0
• 

  Uttam Sharma•90

  @uttamsharma446Posted over 2 years ago

  Hey JOHNROOKIE, Great work :) but while fetching data you can show loading content for eg.

  let loading=false;

  const fetchData =()=>{ loading=true fetch(api).then(response=>response()).then(result=>{ loading=false; //store data

  }).catch(err=>{})

  }

  if(loading){ //show loading

  } else{ show data content }

  Note: this fetch data method you can use on click as well on initial load of the page

  0

  ---

  

  John Andrey Galingan•180

  @johnrookie-coderPosted over 2 years ago

  @uttamsharma446 thanks for the feedback. So, basically, what you wanted to say is that I should add a loading spinner while the data is fetching in the background? That would be a great suggestion thanks and have a great day :)

  1