For this task, I utilized plain HTML, CSS, and JavaScript to create a customizable chocolate pack feature. Here's a breakdown of my approach and reasoning:

HTML: I structured the HTML to include checkboxes for selecting different types of chocolates, an area to display the total price, and a notification section for displaying messages. I used semantic HTML elements to maintain a clear and meaningful structure.

CSS:In the CSS file, I focused on styling the elements to create an appealing and user-friendly interface. I applied basic styling to enhance readability, such as setting font families, colors, and spacing. Additionally, I used flexbox and CSS grid to organize the layout and ensure responsiveness across different screen sizes.

JavaScript:The JavaScript code handles the functionality of the chocolate selection feature. I utilized event listeners to detect changes in checkbox states and calculated the total price based on the selected chocolates. To enforce the maximum limit of 8 chocolates, I implemented logic to prevent further selection when the limit is reached and displayed a notification message to inform the user. This approach ensures a smooth and intuitive user experience while adhering to the specified requirements.

Overall, I opted for a lightweight and straightforward approach using vanilla HTML, CSS, and JavaScript to fulfill the task requirements efficiently. This choice eliminates the need for external libraries or frameworks, keeping the codebase simple and easy to maintain.