Major-assignment on
JS
Overview
Create a dynamic, interactive eCommerce website with HTML, CSS, and
JavaScript.
The website will have a collapsible sidebar to navigate between categories,
and each category will display products.
Implement the logic for collapsing and expanding the sidebar using
JavaScript, and include product cards, and various features to enhance the
user experience.
You are expected to explore various aspects of JS.
Main Contents of the site
HTML, CSS
● The Main Content Area should display a list of products based on the selected
category. Each product should have an image, title, price, and an "Add to Cart"
button. Style the main content area to ensure a clean and visually appealing
layout.
● Sidebar: Create a collapsible sidebar with product categories (e.g., "Electronics",
"Clothing", "Home", "Books", etc.).
● Style the product cards with images, titles, prices, and "Add to Cart" buttons.
● Shopping Cart: Include a simple cart icon in the sidebar.
● Add Header and Footer.
● Ensure the page is fully responsive, adjust the layout for different screen sizes,
and ensure the sidebar behaves well on mobile.
● Add animations for product hover effects (e.g., zoom-in effect on product
images).
JavaScript
● Implement the sidebar collapse/expand functionality using JavaScript (as
detailed in the previous assignment).
● When a product is added to the cart, store the selected items in JavaScript (you
don't need a backend for this, just use JavaScript variables).
● Shopping Cart: Implement a basic shopping cart system in which users can view
the added items, their quantity, and their total price.
● Add to Cart Button: Clicking this button should add the product to the cart,
update the cart icon, and allow the user to see a summary of their cart.
● Implement category filtering: When a user clicks a category in the sidebar,
update the main content area to show products from that category.
● The sidebar should collapse to a small icon on mobile devices, with a hamburger
menu or another button to toggle the sidebar.
Bonus Points (Optional)
Note
These are extra elements that you may add to your website. Adding these will get you
brownie points, but these are optional.
● Implement a search bar that allows users to search for products by name or
category.
● Add product details pages: When a user clicks on a product, they could see more
details (description, reviews, etc.).
● Add quantity selection: Allow users to adjust the number of items they want to
add to the cart.
● Style the checkout button and ensure it links to a "checkout" page (this could be
a placeholder page).
● You may use placeholder images for product photos (for example, from Pinterest
or Unsplash)
Evaluation Criteria
Functionality 50%
Quality 20%
Creativity 15%
Design 15%
Tips
● You may use CSS grids to create product cards.
● You may use Lighthouse to audit your eCommerce Website.
