@elaineleung
Posted
Hi staticish, well done, I like your spinning dice animation 🙂
Your app currently has an issue that's commonly seen on Firefox, which is that the next advice doesn't load due to caching, and so because I use Firefox, I can't see the second advice. To avoid that, you just need to add a header object in the fetch method:
fetch("https://api.adviceslip.com/advice", { cache: 'no-cache' })
I see in your useEffect that for your state setState, you had the entire card written in JSX there. I would actually just use setState with only the data that's been taken from the API and have the card in the return instead, so that setState would contain the data object and not the JSX string.
My only other suggestion is, you can try making the font size bigger just like the size used in the design, as that would be easier to read on bigger screens.
You also have some accessibility issues in your report; all you need is to change your <div className="App"> to <main className="App">
Once again, well done! 😊
Marked as helpful
