Online Store Website

Basic online store, to implement what I learn about OOP, and improve my skills in JavaScript and HTML & CSS.
Note: All the images and texts in the project are made by AI

Live demo

Project structure

scripts:

• cart_btn.js Is for the purchase request and storing the data by using localStorage.
• cart_page.js Is for the cart page, and is used to get all purchases and provide them to the user.
• pop_up.js Is for the close button of the Pop-up, That appears when clicking the 'Introduction' or 'Car history'.
• product_class.js Is the important module, here where the objects are made with their properties and methods.
• product_filter.js Is for the filters of the products on the home page.
• product_generator.js Here is where the products are getting from the JSON file and converted to the Objects depending on which category.
• product_page.js Is for the product page, by getting the ID of the product and then providing product data.

indexs:

• cart.html, home.html, and product_page.html are the store's pages.
• header.html Is a copy of the header to reuse on multiple pages.

styles:

• cart_page.css, product_page.css, and shop.css are the styles of store's pages.
• cart_icon.css is the style of the purchase icon, it appears when you have at least one purchase.
• header.css Is the style of the header.
• popup.css Is the style of the pop-up.

product_data:

• products_data.json Contains all product data from name to price.
• img Contains all the images of the products.

Pictures

Buying process

Product filter

Pop-up