Scribd
Upload
6 views4 pages

06_ShoppingCart_Task

Students will create a web page simulating a shopping cart with features such as adding, viewing, updating, and removing products, as well as saving the cart state using cookies. The project will also include customizable themes, allowing users to switch between light and dark modes, with their preferences stored in cookies. Technical requirements include HTML for structure, CSS for styling, and JavaScript for functionality, along with guidelines for responsive design and user interactions.

Uploaded by

rportugali01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

06_ShoppingCart_Task

Students will create a web page simulating a shopping cart with features such as adding, viewing, updating, and removing products, as well as saving the cart state using cookies. The project will also include customizable themes, allowing users to switch between light and dark modes, with their preferences stored in cookies. Technical requirements include HTML for structure, CSS for styling, and JavaScript for functionality, along with guidelines for responsive design and user interactions.

Uploaded by

rportugali01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Practice: Dynamic Shopping Cart with

Customizable Themes and Cookies

Description:
Students will develop a web page simulating a shopping cart with the following features:

Shopping Cart Features:

1. Add Products:
Users can add products to the cart by selecting them from a predefined product list.

2. View Cart:
Display products added to the cart, including name, price, quantity, and subtotal. The
total amount should also be calculated.

3. Update Quantity:
Allow users to modify product quantities directly in the cart.

4. Remove Products:
Provide an option to delete specific products from the cart.

5. Save Cart:
Use cookies to save the cart's state between browser sessions.

Theme Features:

1. Change Theme:
Allow users to switch between at least two color themes (light and dark).

2. Save Theme Preference:


Store the user's theme preference in a cookie so that the previously selected theme is
automatically applied upon page reload.

Technical Requirements:

1. HTML: Structure the web page.

2. CSS: Style the page, including classes for different themes.

3. JavaScript:

o Manage the shopping cart (add, update, remove products).

o Handle theme changes.

o Use cookies to store the cart and theme preferences.


Additional Guidelines (Detailed):

Project Structure:

• HTML:

o Create a product list with a button to add each product to the cart.

o Include a container to dynamically display the cart.

o Add buttons for changing themes (light/dark).

• CSS:

o Define classes for themes: theme-light and theme-dark.

o Apply themes to the <body> using JavaScript by toggling classes.

• JavaScript:

o Organize the code into modular functions:

▪ addToCart(product): Add a product to the cart.

▪ updateCart(): Update the cart display.

▪ changeTheme(theme): Switch themes and save the preference in


cookies.

▪ saveCart(): Save the cart to cookies.

▪ loadCart(): Load the cart from cookies on page load.

Cookies and Persistent Data Management:

1. Saving Cookies:

o Include the path=/ option for global access.

o Use separate cookies for the cart and theme:

javascript

document.cookie =
`cart=${encodeURIComponent(JSON.stringify(cart))}; path=/`;
document.cookie = `theme=${theme}; path=/`;

2. Expiration Dates:

o Add the expires property to set cookie lifetimes if needed.


User Interactions:

1. Alerts and Confirmations:

o Display confirmation messages when adding or removing products or changing


themes.

2. Validation:

o Ensure quantities are positive before updating the cart.

3. Dynamic Updates:

o Automatically refresh both the display and cookies when the cart is modified.

Formatting and Design:

1. Responsive Design:

o Use flexbox or grid to ensure the product list and cart adapt to different screen
sizes.

2. Customizable Themes:

o Themes should impact the background, text color, and button styles.

css
.theme-light {
--bg-color: #fff;
--text-color: #000;
}
.theme-dark {
--bg-color: #333;
--text-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}

3. Control Buttons:

o Clear Cart: A button to completely empty the cart and clear cookies.

o Checkout: A button simulating checkout, displaying a confirmation message,


and clearing the cart.
Optional Enhancements:

1. Animations:

o Add subtle CSS transitions for smooth theme changes.

2. Libraries:

o Allow (but do not require) the use of libraries like Bootstrap to simplify design.

You might also like