-
Notifications
You must be signed in to change notification settings - Fork 0
/
shoppingList.js
43 lines (36 loc) · 1.17 KB
/
shoppingList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const toShopList = [];
const form = document.querySelector('form');
const ul = document.querySelector('ul');
const productNumber = document.querySelector('h1 span');
const shoppingList = document.getElementsByClassName('product');
const input = document.querySelector('input');
const removeProduct = (e) => {
e.target.parentNode.remove();
const index = e.target.parentNode.dataset.key;
toShopList.splice(index, 1)
console.log(toShopList);
productNumber.textContent = shoppingList.length;
renderList();
}
const addProduct = (e) => {
e.preventDefault()
const nameProduct = input.value;
if (nameProduct === "") return;
const product = document.createElement('li');
product.className = 'product';
product.innerHTML = nameProduct + "<button>Delete</button>";
toShopList.push(product)
renderList()
ul.appendChild(product);
input.value = "";
productNumber.textContent = shoppingList.length;
product.querySelector('button').addEventListener('click', removeProduct);
}
const renderList = () => {
ul.textContent = "";
toShopList.forEach((toShopElement, key) => {
toShopElement.dataset.key = key;
ul.appendChild(toShopElement);
})
}
form.addEventListener('submit', addProduct)