Skip to content

This task is a practice exercise for using `forEach` in JavaScript. It allows users to select products from a list and display the total price. Clicking on a product adds it to the selected products list and updates the total price. The total price can be displayed using the "Show Price" button and the list can be reset with the "Reset" button.

Notifications You must be signed in to change notification settings

Amrr-Maherr/Add-To-Cart-Task

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Product Selection and Pricing

Welcome to the Product Selection and Pricing web application! This project serves as a practical exercise for mastering JavaScript's forEach method. It features an interactive interface where users can select products and calculate their total price.

Screenshot of Product Selection and Pricing

πŸš€ Features

  • Interactive Product Selection: Click on any product title to add it to your selection list. Each selection updates the total price dynamically.
  • Total Price Calculation: Use the "Show Price" button to display the accumulated cost of all selected products. This functionality demonstrates the use of the forEach method to iterate over the product list and calculate the total price.
  • Easy Reset: Click the "Reset" button to clear both your selected products and the total price.
  • Responsive Design: Built with Bootstrap to ensure a smooth experience on all devices.

πŸ›  Technologies Used

  • HTML: Defines the structure and content of the web page.
  • JavaScript: Manages user interactions, product selection, and price calculations. The core challenge of this project is to use the forEach method for iterating over product elements, adding their names and prices to the selection list, and calculating the total price.
  • Bootstrap: Provides responsive design and styling to enhance the user interface.

πŸ“ Files

  • index.html: The core HTML file that structures the web page.
  • js/main.js: Contains JavaScript logic for handling product selection and price updates, specifically using the forEach method to iterate over products and manage their prices.

πŸ“‹ How to Use

  1. Select Products:

    • Click on product titles to add them to your selection list.
    • The names of selected products will appear in the designated area, and the total price will be updated accordingly.
  2. View Total Price:

    • Click the "Show Price" button to see the total price of the selected products displayed on the screen. This feature highlights the use of the forEach method in calculating the total.
  3. Reset Selection:

    • Click the "Reset" button to clear your selections and reset the total price to zero.

πŸ”§ Installation

  1. Clone the Repository:

    git clone <repository-url>
    

Open the Project: Navigate to the project directory and open index.html in a web browser to start using the application. 🌐 Live Demo Explore the live project here.

πŸ“œ License This project is licensed under the MIT License. For more details, please refer to the LICENSE file.

πŸ™Œ Acknowledgements Bootstrap: For providing responsive design and a range of UI components. Font Awesome: For the icons used in the footer. Thank you for checking out this project. If you have any questions or feedback, feel free to reach out!

This updated version clearly states the challenge of using the forEach method for product iteration and price calculation, and includes the live demo link for easy access.

About

This task is a practice exercise for using `forEach` in JavaScript. It allows users to select products from a list and display the total price. Clicking on a product adds it to the selected products list and updates the total price. The total price can be displayed using the "Show Price" button and the list can be reset with the "Reset" button.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published