HTML , CSS , Vanilla JavaScript and API calling ( using Fetch API )
Design comparison
Solution retrospective
Made some necessary changes after reading some wonderful feedback.
Any more suggestions for improvements will be welcomed :)
Community feedback
- @SatellitePeacePosted about 2 years ago
Hello @rachit0706
I noticed that your button does not work and you can only get new advice when you reload the page
- The purpose of the challenge is for the app to fetch new advice on click which means that button is meant to have an event listener that will call a function to produce new advise on click like in the example below
btn.addEventListener("click", function () { advice(); });
-
I also noticed that you used Math.random() which is not very necessary because the API in question is designed in such a way that it generates random advice each time you make a request
-
Also shortening the length of the advice kind of defeats the purpose except if you were using it as a way to learn something new
-
so a better solution might be to get the advice url to fetch it with any method you like in your case you used async/await, then extract the id and advise from the API and attach it to your main content innerHTML like so
async function advice() { const response = await fetch(URL); const data = await response.json(); const { id, advice } = data.slip; adviceText.innerHTML = `<h1 class="advice__heading">Advice # ${id}</h1> <p class="advice__text"> " ${advice} " </p>`; }
advice();
-
make sure you call this advice(); function inside your button event listener to make sure that each time the button is clicked new advice is fetched
-
In your html your dice img should be enclosed in a link tag
I HOPE THIS HELPS
Marked as helpful2 - @AbsorberendPosted about 2 years ago
Hey bro, looking good!
I noticed that the button didn't work, you can add it with the code below if you like. I noticed you'll run into an error eventually with this code. I think it's because some advice statements are actually > 95 characters long and it gives an error. I'm not 100% on that.
const diceBtn = document.querySelector(".dice-img"); diceBtn.addEventListener("click", async function() { let adviceData = await generateAdvice(); theAdvice.textContent = `"${adviceData.advice}"`; adviceNum.textContent = `Advice #${adviceData.id}`; });
Marked as helpful1
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