Welcome to the Riddle Guess Game, an exciting and interactive web-based game designed to challenge your wit and problem-solving skills! Built using HTML, CSS, and JavaScript, this game allows you to test your ability to guess the punchline to a random riddle. By integrating with a free external API, the game fetches fresh riddles each time, ensuring a new challenge with every round. Whether you're looking to have some fun or simply take a break, this game offers a simple yet engaging experience with a smooth user interface and responsive design.

In this game, you'll enter your guess for each riddle's punchline, and with a click of a button, you'll find out if you're right! Stumped? No worries—you can always reveal the correct answer and try again with a new riddle. The Riddle Guess Game is perfect for honing your puzzle-solving skills while demonstrating the power of modern web development through dynamic API integration and interactive feedback for a seamless user experience.

You may also check this simple HTML, CSS and JavaScript project:

• Rounded Navbar Design
• Interchangeable Background Color
• Wordle Game Clone
• Internet Connection Notification
• Pasta Recipe Finder

Features:

• Random Riddle Generation: Fetches a new riddle from the API each time the user requests one.
• User Input for Guessing: Users can input their guess for the riddle's punchline.
• Check Guess: A feature that allows users to validate if their guess is correct.
• Reveal Answer: If the user is stuck, they can reveal the correct answer.
• Interactive Feedback: Displays a message indicating whether the user's guess is correct or wrong.
• Responsive Design: The app is styled to work well on different screen sizes and devices.

Technologies Used:

1. HTML: Provides the structure and layout of the web application.
2. CSS: Used for styling the game, giving it a clean, modern, and responsive design.
3. JavaScript: Handles the logic, interaction, and API integration for fetching riddles, processing user input, and providing feedback.
4. Official Joke API: A free external API used to fetch random riddles for the game.

How to Use:

1. Start the Game: Click the "Get Riddle" button to fetch a random riddle from the API. The riddle will be displayed on the screen.
2. Enter Your Guess: Type your answer (punchline) in the provided input field.
3. Check Your Guess: After entering your guess, click the "Check Guess" button. The game will display whether your guess was correct or not.
4. Reveal Answer: If you're unable to guess the punchline, click the "Reveal Answer" button to see the correct answer.
5. Try Again: You can fetch a new riddle by clicking "Get Riddle" again and repeat the process.

Sample Screenshots of the Project:

Landing Page

Incorrect Guess

Reveal Correct Answer

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, the Riddle Guess Game offers an enjoyable and interactive experience that showcases the integration of external APIs with HTML, CSS, and JavaScript. By combining fun gameplay with dynamic content fetching and user interaction, this project not only challenges users' problem-solving skills but also highlights essential web development techniques. Whether you're here for entertainment or learning, this game provides a smooth and engaging way to practice your guessing abilities while experiencing modern web technologies in action.

That's it! I hope this "Riddle Guess Game Using HTML, CSS and JavaScript" will assist you on your  programming journey, providing value to your current and upcoming project.

For additional tutorials and free source codes, explore our website.

Enjoy Coding :>>