https://github.com/codelikeagirl29/shopping-list-js

I created a dynamic Shopping Cart with Javascript, Bootstrap, and HTML.
https://github.com/codelikeagirl29/shopping-list-js

bootstrap interactive js project shopping-cart

Last synced: about 2 months ago
JSON representation

I created a dynamic Shopping Cart with Javascript, Bootstrap, and HTML.

• Host: GitHub
• URL: https://github.com/codelikeagirl29/shopping-list-js
• Owner: CodeLikeAGirl29
• Created: 2024-01-03T23:05:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-20T10:56:27.000Z (almost 2 years ago)
• Last Synced: 2025-03-26T21:13:48.175Z (over 1 year ago)
• Topics: bootstrap, interactive, js, project, shopping-cart
• Language: HTML
• Homepage: https://keen-belekoy-5d5bcf.netlify.app/
• Size: 32.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Shopping Cart

**Project Description: Shopping List with JavaScript and Bootstrap**

> live link can be found [here](https://keen-belekoy-5d5bcf.netlify.app/)

Welcome to the Shopping List project, a hands-on coding challenge designed for [Altcademy](https://www.altcademy.com/classroom/courses/jqueryium/assignments/6567b0747c1c9a0002aceee2) bootcamp participants. In this project, you'll be creating a dynamic and interactive shopping list application using JavaScript and Bootstrap.

![screenshot](https://res.cloudinary.com/codelikeagirl29/image/upload/v1704523337/projects/Shopping-Cart_e6gg6q.png)

## **Project Overview:**

In this project, you will build a web-based shopping list application that allows users to add items, specify quantities, and view the total cost of their shopping cart. The application will feature a responsive and user-friendly interface using the Bootstrap framework, ensuring a seamless experience across different devices.

## **Key Features:**

1. **Item Management:**

   - Users can add items to their shopping list by providing the item name and its price.

   - The application will dynamically update the list, displaying each item, its price, and a quantity input for users to specify how many of each item they want to purchase.

2. **Interactive Quantity Input:**

   - Each item in the shopping list will have an associated quantity input field, allowing users to easily adjust the quantity of items they wish to purchase.

   - Real-time updates will be reflected in the subtotal for each item as users modify the quantity.

3. **Dynamic Subtotals:**

   - The application will automatically calculate and display the subtotal for each item based on its price and the specified quantity.

   - Users will have a clear overview of the total cost of each item in their shopping cart.

4. **Total Price Display:**

   - A dedicated section will showcase the total price of all items in the shopping cart, providing users with a comprehensive view of their anticipated expenses.

5. **Responsive Design with Bootstrap:**

   - Utilize Bootstrap's responsive grid system and components to ensure a visually appealing and mobile-friendly shopping list application.

### **Learning Goals:**

- Gain proficiency in manipulating the DOM with JavaScript to create dynamic and interactive web pages.

- Implement event handling to respond to user interactions such as adding items and adjusting quantities.

- Practice utilizing Bootstrap for building a responsive and aesthetically pleasing user interface.

### **Prerequisites:**

- Basic understanding of HTML, CSS, and JavaScript.

- Familiarity with Bootstrap for creating responsive web pages.

Embark on this exciting project to enhance your front-end development skills, and have a hands-on experience in building a practical application that simulates a real-world shopping list. Happy coding!