Product Catalog - Debugging Practice

This is a debugging practice exercise for a product catalog website. The website is supposed to display a list of products that can be filtered, sorted, and searched. Users should also be able to add products to a cart.

Expected Behavior

When the website is working correctly, it should have the following functionality:

Basic Layout

• A header with the title "Product Catalog" and a shopping cart icon with a counter
• Controls section with search, filter, and sort functionality
• Main section displaying product cards in a grid layout
• Footer with copyright information

Product Cards

• Each product card should display:
  • Product image
  • Product name
  • Product category
  • Product price
  • "Add to Cart" button

Functionality

1. Filtering: Users should be able to filter products by category using the dropdown menu.
2. Sorting: Users should be able to sort products by:
   • Default (by ID)
   • Price: Low to High
   • Price: High to Low
   • Name: A to Z
3. Searching: Users should be able to search for products by name or category.
4. Shopping Cart: When a user clicks "Add to Cart", the cart count should increment.

Known Issues

The website currently contains multiple bugs in HTML, CSS, and JavaScript that prevent it from functioning correctly. Your task is to identify and fix these issues.

Getting Started

1. Open the HTML, CSS, and JavaScript files in your code editor
2. Review the code and identify potential errors
3. Fix the errors and test to ensure the website is working as expected
4. Compare your fixes to the list of errors in the ERRORS.md file

Good luck with your debugging practice!