Responsive Recommendations Application with CSS Grid.

Community feedback

• 

  Shivangam Soni•1,030

  @ShivangamSoniPosted 10 days ago

  The adviceData that you have created for initialization is not needed at all. Since you are making a request on DOMContentLoaded there's no need for an initial dummy data. Also, the initial loading UI is being shown because that's the default you have written in your markup. You can simply pass the response data to the updateUI function.

  Another thing is the way you are handling the error, you don't have to update the UI manually to show the error you can simply reuse your updateUI function to display errors.

  async function getAdvice() {
    try {
      const response = await fetch("https://api.adviceslip.com/advice");
      const data = await response.json();
      updateUI(data.slip);
    } catch (error) {
      console.error("Failed to fetch advice:", error);
      updateUI({id: "404", advice: "An error occurred. Please try again."});
    }
  }
  

  0