JS Advice Generator API with random number gen

Solution retrospective
Hey everyone!
Another JS build, this time with the API. After making a simple incremental counter, I created a random number generator for the advice # for a bit more fun 😊
Was able to fix the “sticky” behavior of :focus on button click with :focus-visible. As I was digging into this, there’s a ton more I’d like to learn about accessibility.
This is my first time working with APIs and fetch(). It works well in the browsers I tested, except for Firefox. In FF, a new piece of advice is provided on page load, and also when you click the button the 1st time (works as expected). But after the 1st button click, the advice doesn’t update anymore on click. The counter updates, so I think it’s something in the way I used fetch(). None of the solutions I’ve found so far (mostly StackOverflow) seem to help. 🤔
So my questions this time around:
- Know of any sites that totally rock accessibility? I’ve found the WAI tutorials W3C provides and common design pattern best practices with ARIA and the WCAG guidelines as references. I’m interested in finding great IRL implementation examples or a particular site/dev/expert to follow so I can level up 📚 my skills in this area
- Not sure what in my JavaScript is causing the Firefox issue (maybe something missing from my code?). Any suggestions/recommendations would be greatly appreciated!
Thanks!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Riley's solution.
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