Magic 8 Ball: Sarcastic Edition

One-Shot Prompt Sarcastic Magic 8 Ball. Get your deepest, dearest questions answered with eye-rolling responses, or switch to classic mode for a traditional response. Enjoy the retro 80s arcade theme.

Comment

What inspired you

I was inspired by the classic Magic 8-Ball toy but wanted to give it a modern twist with personality. The idea of having a sarcastic mode alongside the traditional responses felt like a fun way to subvert expectations - you get the familiar mystical experience, but sometimes with a cheeky attitude that reflects how we actually feel when asking these questions!

What you learned

This project taught me the power of CSS animations and how much personality you can inject into a simple concept. I learned about creating engaging visual effects like the animated grid background, scanlines, and neon glow effects that really bring the 80s arcade aesthetic to life. The challenge of making text wrap properly in a circular window was also a great lesson in responsive design.

How you built it

Built entirely with vanilla HTML, CSS, and JavaScript in a single file. The 80s aesthetic uses CSS gradients, animations, and the Orbitron font to create that retro-futuristic feel. The dual personality system is implemented with two arrays of responses and a simple toggle mechanism. CSS keyframe animations handle the satisfying shake effect, while the neon styling uses box-shadows and text-shadows for that authentic arcade glow.

Challenges faced

The biggest challenge was getting the answer text to wrap properly in the circular answer window - longer sarcastic responses needed careful CSS styling to fit nicely. Balancing the retro aesthetic while keeping it modern and responsive was also tricky. I had to fine-tune the animations to feel satisfying without being overwhelming, and ensure the large ball design worked well across different screen sizes.

What's next for Magic 8 Ball: Sarcastic Edition

Complete the build and deploy to a real domain, just put it out there for people to have fun with! I apologize for the rough and ready but I was trying to build and enter to this competition in less than 45 minutes. I finished in 42 minutes.

Built With

Share this project:

Updates