Task 3
Открыто с: суббота, 3 октября 2026, 00:00
Срок сдачи: суббота, 17 октября 2026, 00:00
Требуемые условия завершения
# Task 1. Online Shop with a Cart
**Maximum score: 15**
## Goal
Build a front-end online shop application with a cart in vanilla JavaScript: learn to keep the application state in a data model and re-render the UI from it.
## What to build
A single-page application (HTML + CSS + JS). No back end is needed: only static files served by a local Node.js server (see "How to run").
### Functional requirements
1. **Product catalog.** Show 5–6 products. Each product has a name, a price and an "Add to cart" button.
2. **Adding to the cart.** Clicking the button puts the product into the cart. If it is already there, increase its quantity instead of adding a second row.
3. **Changing the quantity.** Every cart line has "+" and "−" buttons; the quantity changes by one.
4. **Cart display:**
- the list of selected products: name, unit price, quantity, line total;
- the total number of items in the order;
- the order grand total.
5. **Removal.** Decreasing the quantity to zero removes the line (or provide a separate "Remove" button — your choice).
6. **Empty cart.** While nothing is selected, show a clear message (for example, "Your cart is empty") and the totals are 0.
### Quality requirements
- The grand total is always recomputed from the data rather than kept in a separate hand-maintained counter.
- No errors or warnings in the browser console (F12 → Console).
- The cart state lives in the JS model; the DOM is re-rendered from the model — as in the "Theater" lesson.
- Products can be stored as an array of objects, for example:
```js
{ id: 1, title: "Laptop", price: 750, quantity: 0 }
```
### Recommended project structure
```
shop/
├── index.html
├── styles.css
└── js/
├── products.js # model: the product list and the cart logic
├── cartComponent.js # renders the catalog and the cart (like roomComponent.js)
└── index.js # entry point (like index.js)
```
Modules are wired up with `<script type="module" src="js/index.js"></script>`.
## How to run
ES modules (`import`/`export`) do not work when a file is opened directly through `file://`, so a local server is required. Any npm package will do, and you do not have to install it into the project:
```bash
npx serve .
# or
npx http-server .
```
Then open the address printed in the console.