Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rahul02m/shopping-card

In this project, we’ll build a shopping cart application using HTML, CSS, JavaScript (which means no external libraries or frameworks). The goal is to understand the mechanics of a shopping cart system.🛒🌟
https://github.com/rahul02m/shopping-card

addtocart cart frontend javascript pure-javascript

Last synced: 8 days ago
JSON representation

Host: GitHub
URL: https://github.com/rahul02m/shopping-card
Owner: Rahul02M
Created: 2023-12-26T12:47:18.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-02-05T12:55:04.000Z (10 months ago)
Last Synced: 2024-02-05T13:57:29.782Z (10 months ago)
Topics: addtocart, cart, frontend, javascript, pure-javascript
Language: HTML
Homepage: https://wearbeat-collective.netlify.app/
Size: 347 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Shopping Cart🛒

1. Introduction
- In this project, i build a shopping cart application using HTML, CSS, JavaScript (which means no external libraries or frameworks). The goal is to understand the mechanics of a shopping cart system.🛒🌟

2. Project Overview

- Shopping cart will simulate a clothing store. Each product card will include an image, title, description, price, and quantity options. Users can add or remove items from the cart, and the total bill will be calculated.

3. Key Sections Covered

- Setup: Initialize your project and set up the necessary files.

- Navbar: Create a navigation bar for easy access to the cart.

- Product Cards: Display product information (image, title, description, price).

- Increment and Decrement Functions: Implement buttons to adjust item quantities.

- Update Functions: Update the cart based on user actions.

- Calculation: Calculate the total bill.

- Remove Item: Allow users to remove items from the cart.

- This project is a great opportunity to practice your JavaScript skills without relying on external libraries. Happy coding! 🛒🌟

4 . Screenshots

- Desktop screen

![shoping cart](https://github.com/Rahul02M/Shopping-Card/assets/133855195/29cc1ce5-fad0-47d1-835d-a7747192b56d)

![shoping cart 2](https://github.com/Rahul02M/Shopping-Card/assets/133855195/6e7e159b-a09e-4e2b-aa39-2ea4690b54d6)

- Mobile Screen

![shoping cart mobile](https://github.com/Rahul02M/Shopping-Card/assets/133855195/3858a625-c666-4e29-9eba-67a517853745)