Skip to content

A clean and responsive product list with an add-to-cart feature, built using HTML, CSS, and JavaScript. Users can browse products, add them to a cart, and view the cart's contents in an expandable section with a blurred background effect. Perfect for e-commerce demonstrations or small-scale shopping sites.

Notifications You must be signed in to change notification settings

mhd-shadad/Product-Cart-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Product Cart App

This is a Frontend Mentor challenge project where users can browse a list of products and add them to their cart. The cart dynamically updates as items are added or removed. This project was built to enhance frontend development skills.

Table of Contents

Overview

The Product Cart App is a simple frontend application where users can:

  • View a list of products.
  • Add products to a cart.
  • View the total quantity and price of items in the cart.
  • Expand and collapse the cart while viewing the product list.

This project demonstrates dynamic interactions with HTML, CSS, and JavaScript.

Features

  • Responsive Design: The app is fully responsive and works on desktop, tablet, and mobile devices.
  • Dynamic Cart Updates: The cart updates in real-time as users add or remove items.
  • Cart Expand/Collapse: The cart can be expanded or collapsed, with the background (product list) blurring for better focus.
  • User-Friendly Interface: Simple and easy-to-navigate UI design.

Technologies Used

  • HTML: For structuring the webpage.
  • CSS: For styling, including responsiveness.
  • JavaScript: For the cart functionality and dynamic updates.
  • Bootstrap (if used): For faster and more efficient UI design.
  • Git: For version control.
  • GitHub: For code hosting and collaboration.

Getting Started

To get a local copy of this project up and running, follow these steps:

Prerequisites

Ensure you have Git installed. You can download it from here.

Installation

  1. Clone the repository:
    git clone https://github.com/mhd-shadad/Product-Cart-App.git

About

A clean and responsive product list with an add-to-cart feature, built using HTML, CSS, and JavaScript. Users can browse products, add them to a cart, and view the cart's contents in an expandable section with a blurred background effect. Perfect for e-commerce demonstrations or small-scale shopping sites.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published