Who doesn’t love a good riddle? They’re fun, challenging, and a great way to exercise the brain! 🧠
In this tutorial, we’ll create a Random Riddle Generator using HTML, CSS, and JavaScript. Our app will:
✔️ Fetch a new riddle from an API.
✔️ Hide the answer until the user clicks “Show Answer”.
✔️ Display a new riddle when clicking “Next”.
✔️ Feature a clean, modern, and interactive design.
By the end of this tutorial, you’ll have a fully functional riddle game to test your wit and challenge your friends! 🎭
Video Tutorial:
🚀 Features of Our Riddle App
✅ Fetches Random Riddles – Uses an API to display new riddles dynamically.
✅ Show/Hide Answer – The answer is hidden until the user chooses to reveal it.
✅ Next Riddle Button – Loads a new riddle instantly.
✅ Responsive and Aesthetic UI – A modern, gradient design with stylish buttons.
🔧 1. HTML: Structuring the Riddle Generator
We start by creating a container that holds:
- A paragraph (
<p>) to display the riddle. - A button to show the answer.
- A hidden answer section that appears on button click.
- A “Next” button to load a new riddle.
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Riddle Generator</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="riddle-container"> <p id="riddle"></p> <button id="show-answer">Show Answer</button> <p id="answer" class="hide"></p> <button id="next">Next</button> </div> </div> <script src="script.js"></script> </body> </html>🎨 2. CSS: Styling the Riddle Generator
Let’s make it look modern and interactive with a gradient background and stylish buttons.
* { box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; margin: 0; padding: 0; background: linear-gradient(45deg, #d674f9, #7e1cfc); display: flex; justify-content: center; align-items: center; } .container { width: min(500px, 90vw); background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align: center; } #riddle { font-size: 18px; margin-bottom: 30px; } #show-answer, #next { font-size: 16px; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 10px; } #show-answer { background-color: #7e1cfc; color: #ffffff; } #next { background-color: #ffffff; border: 2px solid #7e1cfc; color: #7e1cfc; } .hide { display: none; }🎨 UI Features:
✔️ Gradient Background – Gives a vibrant and fun look.
✔️ Centered Riddle Box – Ensures a clean and focused design.
✔️ Stylish Buttons – Uses contrast colors to make interactions clear.
✔️ Hidden Answer – Answer is only visible when revealed. -
🔥 3. JavaScript: Fetching Riddles and Adding Interactivity
The JavaScript handles:
✔️ Fetching random riddles from an API.
✔️ Displaying the riddle dynamically.
✔️ Hiding and revealing the answer.
✔️ Fetching a new riddle on button click.
