Magic 8 Ball

Welcome to the Magic 8 Ball, a digital twist on the classic fortune-telling toy! Built with HTML, CSS, and JavaScript, this project brings a sleek, animated 8 Ball to your screen. Ask a yes-or-no question, click the button (or hit Enter), and let the ball reveal its cryptic wisdom.

Try the live demo here!

Features

• Smooth Animations: Watch the ball shake and float with CSS-powered transitions.
• 20 Classic Responses: From "It is certain" to "Very doubtful," plus neutral replies like "Ask again later."
• Easter Eggs: A 1/50 chance to unlock quirky, hidden answers (keep shaking!).
• Mobile-Friendly: Includes a subtle vibration effect on supported devices.
• Responsive Design: Scales beautifully from desktop to mobile screens.
• Interactive: Click the button or press Enter to get your answer.

How It Works

1. Load the page and behold the floating 8 Ball.
2. Think of a yes-or-no question.
3. Click "Ask the Magic 8 Ball" (or press Enter).
4. Wait as the ball shakes, then reveals its answer in the glowing blue triangle.

Tech Stack

• HTML: Structure with SVG for the iconic triangle.
• CSS: Radial gradients, shadows, and animations for a polished look.
• JavaScript: Handles the logic, randomization, and interactivity.

Installation

1. Clone the repo:

   git clone https://github.com/jasonbra1n/magic-8-ball.git

2. Open index.html in your browser, or host it with a local server (e.g., via VS Code’s Live Server).
3. Start asking questions!

Contributing

Feel free to fork, tweak, or add your own flair—new answers, animations, or features welcome! Submit a pull request or open an issue with your ideas.

Branch Notes

• main: Clean version with a placeholder analytics.js.
• pages-demo: Live demo with analytics/AdSense in analytics.js. Preserve this file during merges.

License

This project is open-source under the MIT License. Use it, share it, and have fun!

---

Built with ☕ by jasonbra1n. Enjoy the mysticism!