Advice generator app

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  The code looks good with some best practices taken into account, including descriptive variable names, use of const for immutable variables, and async/await in handling an AJAX request.

  However, there are some errors in the code that need fixing:

  axios is not defined. You need to import it first, like this: import axios from 'axios';

  getQuote and setIdAndQuote functions are executed with every click on the button. This is due to wrong placement of the event listener. setIdAndQuote should not be inside the event listener. To fix this, simply move setIdAndQuote outside of the click event listener.

  It's better to use let or const for event listeners. That is, $btnDice should be changed to const btnDice.

  If the import and placement of functions are fixed, the button should work even without the "DOMContentLoaded" event listener.

  Here's the corrected code:

  
  const adviceId = document.querySelector(".advice__id");
  const adviceQuote = document.querySelector(".advice__quote");
  const btnDice = document.querySelector(".btn__dice");
  
  const getQuote = async () => {
    try {
      return await axios.get("https://api.adviceslip.com/advice");
    } catch (err) {
      console.error(err);
    }
  };
  
  const setIdAndQuote = async () => {
    const data = await getQuote();
    
    adviceId.textContent = "ADVICE #" + data.data.slip.id;
    adviceQuote.textContent = `"${data.data.slip.advice}"`;
  };
  
  setIdAndQuote();
  
  btnDice.addEventListener("click", setIdAndQuote);
  

  So anyway, your solution looks great. Good luck!

  Marked as helpful

  1

  ---

  

  Franco•200

  @ZafkielEdtPosted over 1 year ago

  @Trueboss Thanks for your feedback!, I will fix the errors.

  0