Image Gallery - Debugging Practice 02

This is an Image Gallery application designed to help you practice your debugging skills. The application has several intentional errors in the HTML, CSS, and JavaScript files that you need to identify and fix.

Expected Behavior

When working correctly, the Image Gallery should:

1. Display a grid of images with titles and descriptions
2. Allow filtering images by category (All, Nature, Architecture, Animals, Food)
3. Enable searching for images by title or description
4. Toggle between light and dark themes
5. Open a modal with a larger image view when an image is clicked
6. Be responsive on different screen sizes

User Interface

• Header: Title and controls (theme toggle and search)
• Filter Section: Buttons to filter images by category
• Gallery: Grid of image cards
• Modal: Expanded view of selected images
• Footer: Copyright information

How to Use (Once Debugged)

1. Toggle between light and dark modes using the theme switch
2. Filter images by clicking category buttons
3. Search for specific images using the search input
4. Click on any image to view it in a larger modal
5. Close the modal by clicking the X or clicking outside the modal

Features

• Theme Toggle: Switch between light and dark color schemes
• Category Filtering: Show only images from specific categories
• Search Functionality: Find images based on their title or description
• Responsive Design: Works on desktop and mobile devices
• Image Modal: View enlarged images with details

Files

• index.html - The structure of the application
• styles.css - The styling for the application
• app.js - The functionality of the application

Your Challenge

Find and fix all the errors in these files to make the application work as expected. The errors include syntax errors, logical errors, typos, and other common mistakes that developers encounter.

Good luck with your debugging practice!