30 Days of Code

Day 6: Object-Word Matching Game

A simple game where users match an object icon with the correct word from multiple choices.

Live Demo

How it Works

About This Project

This application is a simple object-word matching game. It presents users with an icon representing an object and asks them to select the correct corresponding word from a set of options. It’s designed as a basic vocabulary or recognition exercise, potentially useful for learners or as a simple interactive element.

The app uses Font Awesome icons for visual representation and standard HTML/CSS/JavaScript for functionality and presentation. It includes immediate feedback and tracks a score across several rounds.

How it Works

  1. See the Object: An icon representing an object is displayed (e.g., a mug).
  2. Choose the Word: Three buttons with word options are shown below the icon.
  3. Select an Answer: Click the button with the word you think matches the icon.
  4. Get Feedback: A message appears indicating whether your choice was “Correct!” or “Incorrect!”.
  5. Next Round: After a brief pause, the next object and word options are presented.
  6. View Score: Once all predefined rounds are completed, a summary screen shows your final score.
  7. Play Again: A “Start New Game” button allows you to restart the game from the beginning.

The app uses basic styling and focuses on the core matching mechanic.

Creation Process

View App Design Prompt 
Create an object-word matching game.
Instructions:
1. Display a Font Awesome icon representing an object.
2. Provide three word options as buttons below the icon.
3. When a button is clicked, provide immediate feedback ("Correct!" or "Incorrect!").
4. Track the user's score across multiple predefined rounds.
5. After the final round, display the total score and a "Start New Game" button.
6. Use basic HTML, CSS, and JavaScript. Ensure clear visual presentation.
View Implementation Notes 
- Used standard HTML for structure and CSS for basic styling.
- Incorporated Font Awesome for displaying object icons.
- Managed game state (current round, score, object data) using JavaScript variables and an array of objects.
- Handled user interaction through click event listeners on the word option buttons.
- Dynamically updated the DOM to display icons, options, feedback messages, and the final score summary.
- Implemented a simple round progression and a restart mechanism.