Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

JS Advice Generator API with random number gen

Riley•260
@rileydevdzn
A solution to the Advice generator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License