Pseudo-Code and Logic Explanation

Initialize the Application

1. Get References

   • Select and store references to DOM elements such as the shopping cart, close button, product list, cart list, and other relevant components.

2. Define Products

   • Create a list of product objects containing details such as ID, name, image, price, and category.

3. Variables for Cart Management

   • Set up variables to manage cart items (listCards) and button states (addedButtons).

Application Initialization

1. Display Products
   • Call the initApp function to display the initial list of products on the page.

Display Items Function

1. Create Product Elements

   • Iterate through the list of products and create HTML elements to display each product.

2. Update Button States

   • Check if the product is already in the cart and update the button's text and style accordingly.

Filter Items by Category

1. Filter Logic
   • Based on the selected category, filter the list of products and update the displayed items accordingly.

Category Button Click Handling

1. Button Event Listener
   • Attach event listeners to category buttons to handle category selection and filter products.

Add to Cart Function

1. Cart Item Check

   • Check if the product is already in the cart or if it needs to be added.

2. Update Button State

   • Change the button text and style to indicate the product has been added.

3. Update Cart Items

   • Add the product to the cart or update its quantity if it's already present.

4. Reload Cart

   • Refresh the cart display with the updated cart items.

Reload Cart Function

1. Calculate Totals

   • Compute total price and item count for the cart.

2. Update Cart Display

   • Update the cart display with item details and total values.

3. Display Average Price

   • Calculate and display the average price of items in the cart.

Change Quantity Function

1. Update Cart Item Quantity

   • Adjust the quantity of a cart item or remove it if the quantity is zero.

2. Reload Cart

   • Refresh the cart display to reflect changes.

Sort Cart Items

1. Sort Logic

   • Sort the cart items based on price in ascending or descending order.

2. Reload Cart

   • Update the cart display with the sorted items.

Clear Cart Function

1. Reset Cart

   • Clear all items from the cart and reset button states.

2. Reinitialize Products

   • Refresh the product list to ensure buttons are correctly displayed.

Checkout Handling

1. Show Notification

   • Display a notification indicating that the order is booked.

2. Clear Cart After Delay

   • Hide the notification and clear the cart after a brief delay.

Sorting and Clearing Event Listeners

1. Sort and Clear Actions
   • Attach event listeners to sorting and clearing buttons to handle respective actions.