Who doesn’t love cracking open a fortune cookie and reading a fun or inspiring message? 🥠✨
In this tutorial, we’ll build a Fortune Cookie Web App using pure HTML, CSS, and JavaScript. With just a click, users can receive a random fortune message, making it a simple yet engaging project.
🎯 Features of Our Fortune Cookie App
✅ Random Fortune Generator – Displays a new fortune with each click.
✅ Beautiful UI – Styled with Poppins font and a warm color scheme.
✅ Smooth Interactions – Button hover effect for a polished experience.
✅ No Libraries Required – Fully built using plain JavaScript!
🚀 Code Breakdown
1️⃣ HTML: Building the Fortune Cookie Structure
Our HTML creates a container with:
- A title (“Fortune Cookie”)
- A cookie emoji 🥠
- A message placeholder
- A button to open the fortune cookie
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fortune Cookie</title> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> </head> <body> <div class="container"> <h3>Fortune Cookie</h3> <h1>🥠</h1> <p id="fortuneMessage">Click the cookie to get your fortune!</p> <button id="openCookie">Open Cookie</button> </div> <script src="script.js"></script> </body> </html>
2️⃣ CSS: Making It Look Appealing
We use warm orange tones to create a cozy, fortune-cookie-inspired look!
body { font-family: "Poppins", sans-serif; text-align: center; background-color: #ffa500; /* Orange background */ margin: 50px; } .container { max-width: 400px; margin: auto; background-color: #ffffff; padding: 20px; border-radius: 10px; } h1 { font-size: 50px; } h3 { font-size: 40px; } p { background-color: rgba(255, 190, 70, 0.2); font-size: 18px; margin: 20px 0; } button { padding: 10px 15px; font-size: 16px; background-color: orange; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: darkorange; }✨ Key Styling Features:
✅ Warm Color Palette – Uses shades of orange for a fortune-cookie theme.
✅ Modern Font – Uses Poppins for a clean, friendly feel.
✅ Button Effects – Button turns dark orange on hover for a subtle effect.3️⃣ JavaScript: Adding Fortune Cookie Logic
Now, let’s generate a random fortune when the user clicks the button!
let fortunes = [ "You will have a great day today! 🌟", "Something unexpected will make you smile. 😊", "Success is coming your way! 🚀", "A pleasant surprise is waiting for you. 🎁", "You will make a new friend soon. 🤝", "An exciting opportunity will present itself. 🎉", "Happiness is closer than you think! ❤️", "Be patient. Good things take time. ⏳", "A big change is coming in your life. Embrace it! 🔄", "Your kindness will return to you in unexpected ways. 💖", "You will soon cross paths with someone important. 🌍", "Good fortune will follow you wherever you go. 🍀", "A dream you have will soon come true. 🌙", "Trust your instincts; they will guide you well. 🧭", "Adventure is out there—be ready! 🏔️", "You will soon receive great news. 📩", ]; document.getElementById("openCookie").addEventListener("click", function () { let randomIndex = Math.floor(Math.random() * fortunes.length); document.getElementById("fortuneMessage").innerText = fortunes[randomIndex]; });🛠️ How It Works:
✔️ Array of Fortunes – Stores different positive fortune messages.
✔️ Random Selection –Math.random()picks a random fortune.
✔️ Message Update – Clicking the button updates#fortuneMessagewith a new fortune.🎯 Final Thoughts
This Fortune Cookie App is a fun, interactive project that’s perfect for:
- Learning JavaScript 🎓
- Building Random Generators 🔄
- Creating a Fun User Experience 🎉
It’s a great beginner-friendly project that can be expanded into something bigger—like a daily fortune app or a motivational message generator!
💡 Try it out and customize it your way! 🚀
nice work
great