Frontend Mentor | HTML, CSS, JS, Async/Await. Added Features!! coding challenge solution

Solution retrospective

Since this API has a search object, I went ahead and added that feature.

Enter a keyword and the first result matching that keyword will be displayed.
If there is no match for the keyword you'll see the message provided by the API telling you no match could be found.

I will update this to return a random advice slip from the API if there is more than one match.

Another thing I added was the dice image spinning while we await a response from the API if the network is slow.

Community feedback

Oluwatoni Odetola• 320

@ToniHunter274

Posted about 2 years ago

Kudos bro.. This is amazing. I'm also working on this project but I'm having on how to integrate an API into a webpage...Please any tips you could give me would be highly appreciated.

James• 510

@Auddity

Posted about 2 years ago

@ToniHunter274 Thanks! I appreciate that.

What part of the process are you having an issue with? Fetching the data or getting the data to display on screen?

There's a few ways to make a request to an API. On this project I used Async/Await and put the fetch method in a try/catch block. It's a more strait forward way for handling the response from the API.

To get a good understanding of the process you should study XMLHttpRequest and handling Promises in Asynchronous JavaScript (AJAX).

For displaying the data, it depends on the API provider and it's structure. At the heart of that is knowing how to access object properties and their values.

Oluwatoni Odetola• 320

@ToniHunter274

Posted about 2 years ago

@Auddity thank you very much,I would check out AJAX and try to understand it.thank you for the tip.

HTML, CSS, JS, Async/Await. Added Features!!

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community