Skip to content

Commit c6b9405

Browse files
wesboswesbos
committed
Shopping
1 parent be4dd80 commit c6b9405

File tree

4 files changed

+180
-89
lines changed

4 files changed

+180
-89
lines changed

‎exercises/54 - Shopping List/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111

1212
<body>
1313
<div class="shopping-list">
14-
<form class="shopping">
14+
<form class="shopping" autocomplete="off">
1515
<input type="text" name="item" id="item">
1616
<button type="submit">+ Add Item</button>
1717
</form>
1818

19-
<ul class="list"> </ul>
19+
<ul class="list"></ul>
2020
</div>
2121

2222
<script src="./shopping.js"></script>

‎exercises/54 - Shopping List/shopping-DEMO.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// Topics: Custom Events, Event Delegation, local storage, DOM Events, Object Reference,
2+
3+
const shoppingForm = document.querySelector('.shopping');
4+
const list = document.querySelector('.list');
5+
6+
let items = [];
7+
8+
function mirrorToLocalStorage() {
9+
localStorage.setItem('items', JSON.stringify(items));
10+
}
11+
12+
function restoreFromLocalStorage() {
13+
const lsItems = JSON.parse(localStorage.getItem('items'));
14+
if (lsItems.length) {
15+
items = lsItems;
16+
// fire event
17+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
18+
}
19+
}
20+
21+
function handleSubmit(e) {
22+
e.preventDefault();
23+
if (!e.target.item.value) return;
24+
const item = {
25+
id: Date.now(),
26+
name: e.target.item.value,
27+
complete: false,
28+
};
29+
items.push(item);
30+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
31+
e.target.reset();
32+
}
33+
34+
function markAsComplete(id) {
35+
const itemRef = items.find(item => item.id === id);
36+
console.log(itemRef);
37+
// this is just a reference to the item
38+
itemRef.complete = !itemRef.complete;
39+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
40+
}
41+
42+
function deleteItem(id) {
43+
console.log(items, id);
44+
// find the item's index
45+
items = items.filter(item => item.id !== id);
46+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
47+
}
48+
function displayItems() {
49+
const html = items
50+
.map(
51+
item => `<li class="shopping-item">
52+
<input value="${item.id}" type="checkbox" ${
53+
item.complete ? `checked` : ``
54+
} name="item-${item.id}"/>
55+
<span class="itemName">${item.name}</span>
56+
<button aria-label="Remove ${item.name} "value="${item.id}">×</button>
57+
</li>`
58+
)
59+
.join('');
60+
list.innerHTML = html;
61+
}
62+
63+
shoppingForm.addEventListener('submit', handleSubmit);
64+
65+
// List is an empty div where we add items with JS
66+
list.addEventListener('click', e => {
67+
if (e.target.matches('button')) {
68+
deleteItem(parseFloat(e.target.value));
69+
}
70+
});
71+
72+
list.addEventListener('input', e => {
73+
if (e.target.matches('input')) {
74+
markAsComplete(parseFloat(e.target.value));
75+
}
76+
});
77+
78+
list.addEventListener('itemsUpdated', displayItems);
79+
list.addEventListener('itemsUpdated', mirrorToLocalStorage);
80+
81+
restoreFromLocalStorage();
82+
83+
// Challenge - put the done items at the bottom

‎exercises/54 - Shopping List/shopping-FINISHED.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
const shoppingForm = document.querySelector('.shopping');
2+
const list = document.querySelector('.list');
3+
4+
// We need an array to hold our state
5+
let items = [];
6+
7+
function handleSubmit(e) {
8+
e.preventDefault();
9+
console.log('submitted!!');
10+
const name = e.currentTarget.item.value;
11+
// if its empty, then dont submit it
12+
if (!name) return;
13+
14+
const item = {
15+
name,
16+
id: Date.now(),
17+
complete: false,
18+
};
19+
// Push the items into our state
20+
items.push(item);
21+
console.log(`There are now ${items.length} in your state`);
22+
// Clear the form
23+
e.target.reset();
24+
// fire off a custom event that will tell anyone else who cares that the items have been updated!
25+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
26+
}
27+
28+
function displayItems() {
29+
console.log(items);
30+
const html = items
31+
.map(
32+
item => `<li class="shopping-item">
33+
<input
34+
value="${item.id}"
35+
type="checkbox"
36+
${item.complete && 'checked'}
37+
>
38+
<span class="itemName">${item.name}</span>
39+
<button
40+
aria-label="Remove ${item.name}"
41+
value="${item.id}"
42+
>&times;</buttonaria-label="Remove>
43+
</li>`
44+
)
45+
.join('');
46+
list.innerHTML = html;
47+
}
48+
49+
function mirrorToLocalStorage() {
50+
console.info('Saving items to localstorage');
51+
localStorage.setItem('items', JSON.stringify(items));
52+
}
53+
54+
function restoreFromLocalStorage() {
55+
console.info('Restoring from LS');
56+
// pull the items from LS
57+
const lsItems = JSON.parse(localStorage.getItem('items'));
58+
if (lsItems.length) {
59+
// items = lsItems;
60+
// lsItems.forEach(item => items.push(item));
61+
// items.push(lsItems[0], lsItems[1]);
62+
items.push(...lsItems);
63+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
64+
}
65+
}
66+
67+
function deleteItem(id) {
68+
console.log('DELETIENG ITEM', id);
69+
// update our items array without this one
70+
items = items.filter(item => item.id !== id);
71+
console.log(items);
72+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
73+
}
74+
75+
function markAsComplete(id) {
76+
console.log('Marking as complete', id);
77+
const itemRef = items.find(item => item.id === id);
78+
itemRef.complete = !itemRef.complete;
79+
list.dispatchEvent(new CustomEvent('itemsUpdated'));
80+
}
81+
82+
shoppingForm.addEventListener('submit', handleSubmit);
83+
list.addEventListener('itemsUpdated', displayItems);
84+
list.addEventListener('itemsUpdated', mirrorToLocalStorage);
85+
// Event Delegation: We listen or the click on the list <ul> but then delegate the click over to the button if that is what was clicked
86+
list.addEventListener('click', function(e) {
87+
const id = parseInt(e.target.value);
88+
if (e.target.matches('button')) {
89+
deleteItem(id);
90+
}
91+
if (e.target.matches('input[type="checkbox"]')) {
92+
markAsComplete(id);
93+
}
94+
});
95+
restoreFromLocalStorage();

‎exercises/54 - Shopping List/shopping.js‎

Lines changed: 0 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +0,0 @@
1-
// Topics: Custom Events, Event Delegation, local storage, DOM Events, Object Reference,
2-
3-
// 1. Select all elements
4-
// 2. Create an items array. Refer to this as "state"
5-
// 3.
6-
7-
const shoppingForm = document.querySelector('.shopping');
8-
const list = document.querySelector('.list');
9-
10-
let items = [];
11-
12-
function mirrorToLocalStorage() {
13-
localStorage.setItem('items', JSON.stringify(items));
14-
}
15-
16-
function restoreFromLocalStorage() {
17-
const lsItems = JSON.parse(localStorage.getItem('items'));
18-
if (lsItems.length) {
19-
items = lsItems;
20-
// fire event
21-
list.dispatchEvent(new CustomEvent('itemsUpdated'));
22-
}
23-
}
24-
25-
function handleSubmit(e) {
26-
e.preventDefault();
27-
if (!e.target.item.value) return;
28-
const item = {
29-
id: Date.now(),
30-
name: e.target.item.value,
31-
complete: false,
32-
};
33-
items.push(item);
34-
list.dispatchEvent(new CustomEvent('itemsUpdated'));
35-
e.target.reset();
36-
}
37-
38-
function markAsComplete(id) {
39-
const itemRef = items.find(item => item.id === id);
40-
console.log(itemRef);
41-
// this is just a reference to the item
42-
itemRef.complete = !itemRef.complete;
43-
list.dispatchEvent(new CustomEvent('itemsUpdated'));
44-
}
45-
46-
function deleteItem(id) {
47-
console.log(items, id);
48-
// find the item's index
49-
items = items.filter(item => item.id !== id);
50-
list.dispatchEvent(new CustomEvent('itemsUpdated'));
51-
}
52-
function displayItems() {
53-
const html = items
54-
.map(
55-
item => `<li class="shopping-item">
56-
<input value="${item.id}" type="checkbox" ${
57-
item.complete ? `checked` : ``
58-
} name="item-${item.id}"/>
59-
<span class="itemName">${item.name}</span>
60-
<button aria-label="Remove ${item.name} "value="${item.id}">×</button>
61-
</li>`
62-
)
63-
.join('');
64-
list.innerHTML = html;
65-
}
66-
67-
shoppingForm.addEventListener('submit', handleSubmit);
68-
69-
// List is an empty div where we add items with JS
70-
list.addEventListener('click', e => {
71-
if (e.target.matches('button')) {
72-
deleteItem(parseFloat(e.target.value));
73-
}
74-
});
75-
76-
list.addEventListener('input', e => {
77-
if (e.target.matches('input')) {
78-
markAsComplete(parseFloat(e.target.value));
79-
}
80-
});
81-
82-
list.addEventListener('itemsUpdated', displayItems);
83-
list.addEventListener('itemsUpdated', mirrorToLocalStorage);
84-
85-
restoreFromLocalStorage();
86-
87-
// Challenge - put the done items at the bottom

0 commit comments

Comments
 (0)