Kentucky Derby Magic 8 Ball



Filed Under

A list of tags for this post.


  • Code
  • Design


  • Glitch

I started this project in 2018 based on a tutorial by Kelly Lougheed by remixing her Glitch Project (thank you!). At this point my Javascript skills were both minimal and very rusty, so this was a good opportunity to learn and do something fun. The biggest accomplishment of the inaugural version, aside from completing it, was modifying it to exclude having to ask the question, albeit what I came up with wasn’t very elegant, to put it politely.

In 2019 I made some refinements to the Javascript, which felt like an accomplishment as I had a better understanding of what was happening rather than just poking at it with no real clue like I had done in the first version. This year I made a few more JS refinements as well as some CSS and accessibility improvements.

This year’s CSS improvements were mostly general clean-up, like moving from fixed sizes to relative. But a couple of refinements came from the community. I used this article by Håvard Brynjulfsen to spiff up the focus styles on the button and add a nice drop shadow. I had recently saved that article to Pile of hrefs (see project page for just such an occasion. The squishy button active state came from a Piccalilli Quick Tip. Thanks to both Håvard and Andy!

For accessibility I tested using Mac OS VoiceOver and it announced properly in Safari and Chrome, but not Firefox. I’m not sure how well it would work in other screen readers. Hopefully by next year’s version I’ll be able to improve the accessibility further and maybe even give it some nice 8 Ball-ish animations!

View all versions…

Link opens in a new tab or window View Project