const shoppingList = {
key: 'shopping',
items: [
{
text: 'dummy item 1',
isChecked: false,
},
{
text: 'dummy item 2',
isChecked: true,
},
],
init() {
if (localStorage.getItem('shopping')) {
this.items = JSON.parse(localStorage.getItem(this.key));
}
this.drawList();
},
drawList() {
let list = '';
this.items.forEach((item, index) => {
list += `
<div>
<span class="fas fa-check"></span>
<span class="fas fa-trash"></span>
<div contenteditable class="${item.isChecked ? 'strike' : ''}">${item.text}</div>
</div>
`;
});
document.querySelector('.border-gray').innerHTML = list;
localStorage.setItem(this.key, JSON.stringify(this.items));
document.querySelectorAll('.fa-check').forEach(function (check, index) {
check.addEventListener('click', function (e) {
shoppingList.checkItem(index);
});
});
document.querySelectorAll('.fa-trash').forEach(function (trash, index) {
trash.addEventListener('click', function (e) {
shoppingList.trashItem(index);
});
});
document.querySelectorAll('[contenteditable]').forEach(function (update, index) {
update.addEventListener('blur', function (e) {
shoppingList.updateItem(index, e.target.innerHTML);
});
});
},
trashItem(index) {
this.items.splice(index, 1);
this.drawList();
},
checkItem(index) {
this.items[index].isChecked = !this.items[index].isChecked;
this.drawList();
},
updateItem(index, text) {
console.log(index, text);
this.items[index].text = text;
this.drawList();
},
addItem() {
console.log('add');
this.items.push({
text: '...',
isChecked: false,
});
this.drawList();
},
};
shoppingList.init();
document.getElementById('add').addEventListener('click', () => shoppingList.addItem());
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
