Вивчайте Завдання: Додавання та Видалення Елементів DOM | Маніпулювання DOM для Інтерактивної Веб-Розробки

Завдання

Ви створюєте кошик для покупок, у якому користувачі можуть додавати та видаляти товари.

Додати товар до кошика:
- Створити новий елемент <li>;
- Створити новий елемент <button>;
- Додати новий елемент <button> до нового елемента <li>;
- Додати новий елемент <li> до <ul> з ID cart-list.
Видалити товар з кошика: Видалити відповідний елемент <li> з <ul>.

index.html

index.css

index.js

Використовуйте createElement для створення нового елемента <li>;
Використовуйте createElement для створення нового елемента <button>;
Використовуйте appendChild для додавання нового елемента <button> до елемента <li>;
Використовуйте appendChild для додавання нового елемента <li> до <ul> з ID cart-list;
Використовуйте removeChild для видалення відповідного елемента <li> з <ul>.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 11

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me an example of how to add an item to the cart using JavaScript?

How do I remove a specific item from the cart?

Can you explain how the remove button should work for each cart item?

Свайпніть щоб показати меню

Ви створюєте кошик для покупок, у якому користувачі можуть додавати та видаляти товари.

Додати товар до кошика:
- Створити новий елемент <li>;
- Створити новий елемент <button>;
- Додати новий елемент <button> до нового елемента <li>;
- Додати новий елемент <li> до <ul> з ID cart-list.
Видалити товар з кошика: Видалити відповідний елемент <li> з <ul>.

index.html

index.css

index.js

Використовуйте createElement для створення нового елемента <li>;
Використовуйте createElement для створення нового елемента <button>;
Використовуйте appendChild для додавання нового елемента <button> до елемента <li>;
Використовуйте appendChild для додавання нового елемента <li> до <ul> з ID cart-list;
Використовуйте removeChild для видалення відповідного елемента <li> з <ul>.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 11