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.
- 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
forEachmethod 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.
- 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
forEachmethod 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.
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 theforEachmethod to iterate over products and manage their prices.
-
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.
-
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
forEachmethod in calculating the total.
- 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
-
Reset Selection:
- Click the "Reset" button to clear your selections and reset the total price to zero.
-
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.
