Skip to content
Submitted over 1 year ago

Flexbox, HTML5, keyframe, fetch API

Ruan Mesquita•70
@RuHd
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

This app is designed to retrieve a random advices from a API called ADVICE SLIP JSON API (https://api.adviceslip.com). This challenge was much easier than the previous one ( the age calculator), and I thought it'd be tougher because of the API. I used the fetch() method to make the request from the URL and convert the json to a actual JS object. It's always fun to work with API. Hope you all enjoy it!

My question is: is fetch() the best method to work with APIs? either for vanilla and ReactJs?

Community feedback

  • Omran kabo•200
    @OmrankaboPosted over 1 year ago

    i appreciate the hard work you did in this challenge , all the work you did. but why there is nothing showing when the page first loaded . you can set an event listener to the window to display a random advice when the page loads.

    window.addEventListener("DOMContentLoaded", function () {
advice_number.textContent = data.id;
advice_description.textContent = data.advice;

});
    Marked as helpful
    0
    Ruan Mesquita•70
    @RuHdPosted over 1 year ago

    @Omrankabo Thanks for the feedback! Maybe the request sometimes is not getting the data from the API . Because I've tested here and it's working fine when the page loads. But I will figure out the problem and solve it! Thanks again!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord