Design comparison
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
- @ToniHunter274Posted over 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.
0@AuddityPosted over 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.
0@ToniHunter274Posted over 2 years ago@Auddity thank you very much,I would check out AJAX and try to understand it.thank you for the tip.
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