Mobile First - Advice API with loading screen
Design comparison
Solution retrospective
Hello!
This is my solution to the project. Every Feedback is appreciated and would help me a lot.
I added a little loading to the page.
Thanks!
Community feedback
- @zougari47Posted over 2 years ago
Hi there👋
if you notice the quote don't change while clicking the button
you need to clear the cache every time you fetch the data
fetch(URL, { cache: 'no-cache' }
try this
const getAdvice = () => { loadScreen.classList.add("show"); fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' }).then((response) => { return response .json() .then((data) => { adviceId.innerHTML = data.slip.id; adviceText.innerHTML = data.slip.advice; loadScreen.classList.remove("show"); }) .catch((error) => { console.log(Error(error)); loadScreen.classList.remove("show"); }); }); };
Marked as helpful1@YanBaetasPosted over 2 years ago@zougari47 Hello, thank you for your feedback. I just implemented the no-cache as you instructed. Without it, when clicking the button too fast, the quote would not change.
I added an async await to the code as well.
Thank you!
1@zougari47Posted over 2 years ago@YanBaetas I see now the button is working, congratulation 🎉.
0
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