Design comparison
Solution retrospective
Simple Advice generator app to practice making an API call. Now I'm looking forward to doing some more with API calls. Always open to feedback and tips ;)
P.s. I also had some code written to load a piece of advice on page load but wanted to start with the default from our design. So I could see if my code is as pixel-perfect as I could be.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Plinsinga, great work here, and I like what you did with the animating dice icon! I know what you mean about using the initial advice in the design in order to have the pixel perfect screen shot because that's what I did, and I only changed it to have a loading animation afterwards 🙂
About the API, right now I see an issue when I'm viewing this on Firefox where the advice doesn't load on the second round, and this is most likely due to caching. You can try this on Firefox if you have it, and to fix it, you can try adding a header object in fetch:
fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' })
By the way, great job in adding an error handler with fetch! One last suggestion is, since you only have pure text from the data and don't need to parse HTML, try to use
textContent
instead ofinnerHTML
.Marked as helpful1@codedforfreePosted over 2 years ago@elaineleung thank you for your advice. This is really helpful to get to know more about api calls! Will fix the Firefox error asap.
Thanx!
1
Please log in to post a comment
Log in with GitHubJoin 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