Advice Generator - Api Call + Button to generate new.

Community feedback

• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge🎉

  @LukaKobaidze has already addressed the layout issue.

  The Fetch API is a commonly used way to make HTTP requests in web development. There are other libraries and frameworks that can simplify the process of making API requests and handling the response, such as Axios, jQuery, and others. These libraries often provide additional features like request cancellation, automatic JSON parsing, and more. However, I would strongly suggest to clearly understand how Fetch API works first, and then move on to libs/ frameworks as per the requirements.

  Line-by-line explanation of the getAdvice():

  fetch("https://api.adviceslip.com/advice")

  In this line we are using the Fetch API to make a GET request to the Adviceslip.com API at the specified URL ("https://api.adviceslip.com/advice"). This API returns a JSON object with a slip property that contains an id and an advice string.

  .then((data) => {

  return data.json();

  })

  In this line we are using the then method to handle the response data returned by the API request. The arrow function passed as an argument to the then method takes a single argument (data) and calls the json method on it to parse the response body as JSON data.

  .then((completedata) => {

  In this line, we are using another then method to handle the parsed JSON data returned by the previous then method. The arrow function passed as an argument to this then method takes a single argument (completedata) and updates the HTML of the page with the advice ID and text.

  console.log(completedata);

  Logging completedata object for debugging.

  document.getElementById('adid').innerHTML = completedata.slip.id;

  Targetting the HTML element with 'adid' ID and sets its innerHTML property to the advice ID from the API response.

  document.getElementById('advice').innerHTML = completedata.slip.advice;

  Targetting the HTML element with 'advice' ID and sets its innerHTML property to the advice text from the API response.

  While it is alright to use internal CSS and JS for small projects, using external CSS and JS file will help you to organize and maintain the code more efficiently. You may want to checkout my article on 12 Important CSS topics for some simple explanations.

  Hope to see cool projects from you in the future. Once again you've done a wonderful job🚀 Keep at it... Happy hacking ! 💻

  0
• 

  Luka•820

  @LukaKobaidzePosted over 1 year ago

  To center dice properly, you can use left and transform properties together:

  .dice {
  left: 50%;
  transform: translateX(-50%);
  }
  

  Here's how it works...

  0