Want to know your fate? This Magic 8 Ball Project is a fun and interactive fortune teller game built using HTML, CSS, and JavaScript.
Features:
-
🎱 Ask any question and get a random answer
-
🔮 12+ possible responses (Yes, No, Maybe & more)
-
🎨 Stylish UI with smooth animations
-
📱 Works on both desktop & mobile
Why this project?
This is a great beginner-friendly project to practice JavaScript arrays, randomization, and DOM manipulation. It’s also a fun way to surprise your friends — ask the Magic 8 Ball anything, and let it decide your destiny!
You can easily customize the design, add more responses, or even include sound effects for a cooler experience.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS/JS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Magic 8 Ball | CodingPorium</title> <style> /* Import Poppins Font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body{ font-family: Poppins,sans-serif; background: linear-gradient(135deg,#4e54c8,#8f94db); height:100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; text-align: center; } .container{ background: rgba(0,0,0,0.3); padding: 30px; border-radius:20px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); } input{ padding: 10px; border-radius: 10px; font-family: poppins; border: none; width: 250px; margin-bottom: 15px; text-align: center; outline: none; } button{ padding: 10px 20px; border: none; font-family: poppins; border-radius: 15px; background: #ff6b6b; color: white; font-weight: bold; cursor:pointer; transition: 0.3s; } button:hover{ background: #ff4757; } .answer{ margin-top: 20px; font-size: 1.2em; font-weight: bold; animation: fadeIn 0.6s ease; } @keyframes fadeIn { from{opacity: 0; transform: translateY(10px);} to{opacity: 1;transform: translateY(0);} } </style> </head> <body> <div class="container"> <h1>🎱 Magic 8 Ball</h1> <p>Ask any question, and I'll reveal your fate!</p> <input type="text" id="question" placeholder="Type your question..."> <br> <button onclick="shakeBall()">Ask the 8 Ball</button> <div class="answer" id="answer"></div> </div> <script> //set of answers to be displayed const answers = [ "Yes", "No", "Maybe", "Definitely!", "Ask again later","Not a chance","It is certain","Very doubtful","Without a doubt","Better not tell you now","Absolutely","I don't think so" ]; //to randomize an output function shakeBall(){ const randomIndex = Math.floor(Math.random()*answers.length); const response = answers[randomIndex]; document.getElementById("answer").textContent = "🎱 " + response; } </script> </body> </html>
✨ With just a few lines of code, you’ve built your own version of this project! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment