Mini web shop

Slika 1

LogIn validation

This image shows a login form where a user attempted to log in with an email and password. However, a popup alert appears with the message “Invalid email or password!”, indicating that the authentication failed. This kind of alert is usually triggered when the credentials entered don’t match any existing records in the system. It serves as a basic front-end or back-end validation feedback for incorrect login attempts.

Slika 2

Welcome page

This is the home page where all current products are located. They can be added to the cart and later deleted.

Slika 3

Adding products to cart

This page lists all products. When a product is added to the cart, a message appears stating that the product has been successfully added and takes the customer to their cart where they can see all their products. They can continue shopping or go to checkout.

Slika 2

Consumer basket

This is all the products in the cart. You can add new products, then delete a product and continue shopping. At the end, the total price of all products in the cart is written below the product.

Slika 3

Final purchase and payment for products in the cart

This is the final step. The customer clicks here to complete their purchase and receives a notification that the purchase was successful.

Slika 2

Code shop cart

This JavaScript code displays a list of products and allows users to add them to a shopping cart using localStorage. The renderProducts() function dynamically creates and appends HTML elements for each product inside the element with the ID product-list. When a user clicks the "Add to cart" button, the addToCart(id) function finds the product by its ID and stores it in the local cart array. The cart is then saved to localStorage, and an alert notifies the user that the item has been added.