Javascript Javascript API Projects Javascript Projects

Build a Random Riddle Generator with HTML, CSS, and JavaScript

21st February 2025

22

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 () 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.

const riddleRef = document.getElementById("riddle");
const answerRef = document.getElementById("answer");
const showBtn = document.getElementById("show-answer");
const nextBtn = document.getElementById("next");
const URL = "https://riddles-api.vercel.app/random"; // API for random riddles

// Function to update the riddle
const updateRiddle = (riddle, answer) => {
  riddleRef.innerText = riddle;
  answerRef.innerText = answer;
};

// Function to fetch a riddle from the API
const getRiddle = () => {
  answerRef.classList.add("hide"); // Hide the answer initially
  fetch(URL)
    .then((data) => data.json())
    .then((item) => {
      updateRiddle(item.riddle, item.answer);
    });
};

// Show answer when button is clicked
showBtn.addEventListener("click", () => {
  answerRef.classList.remove("hide");
});

// Fetch next riddle when "Next" button is clicked
nextBtn.addEventListener("click", getRiddle);

// Load an initial riddle when the page is loaded
window.onload = getRiddle;

🔍 How It Works:

✔️ Fetches a random riddle from https://riddles-api.vercel.app/random.
✔️ Displays the riddle inside #riddle.
✔️ Hides the answer initially inside #answer.
✔️ Reveals the answer when clicking “Show Answer”.
✔️ Fetches a new riddle when clicking “Next”.

Download Code

Previous article💌 Create a Custom Greeting Card Maker with HTML, CSS, and JavaScript

Create a Fun Fortune Cookie App with HTML, CSS, and JavaScript

Image Gallery with Lightbox Effect Using HTML, CSS, and JavaScript

Skeuomorphism Button | CSS and Javascript

Build a Responsive Digital Clock Using HTML, CSS, and JavaScript

Build a Random Riddle Generator with HTML, CSS, and JavaScript

Video Tutorial:

🚀 Features of Our Riddle App

🔧 1. HTML: Structuring the Riddle Generator

🎨 2. CSS: Styling the Riddle Generator

🎨 UI Features:

🔥 3. JavaScript: Fetching Riddles and Adding Interactivity

🔍 How It Works:

Download Code

💌 Create a Custom Greeting Card Maker with HTML, CSS, and JavaScript

Creating a Letter-by-Letter Text Reveal Effect Using JavaScript

Creating a Smooth Scroll Effect to Jump to a Specific Section

LEAVE A REPLY Cancel reply

Most Popular