Skip to content

Commit e9fe36a

Browse files
PabloContrerasPabloContreras
committed
Lección 15
1 parent 673c3ab commit e9fe36a

2 files changed

Lines changed: 38 additions & 3 deletions

File tree

‎15 - LocalStorage/index-START.html‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,42 @@ <h2>LOCAL TAPAS</h2>
2828
<script>
2929
const addItems = document.querySelector('.add-items');
3030
const itemsList = document.querySelector('.plates');
31-
const items = [];
31+
const items = JSON.parse(localStorage.getItem('items')) || [];
32+
function addItem(e){
33+
e.preventDefault();
34+
const text = (this.querySelector('[name=item]')).value;
35+
const item = {
36+
text,
37+
done: false
38+
};
39+
items.push(item);
40+
populateList(items, itemsList);
41+
localStorage.setItem('items', JSON.stringify(items));
42+
this.reset();
43+
}
44+
45+
function populateList(plates = [], platesList){
46+
platesList.innerHTML = plates.map((plate, i) => {
47+
return `
48+
<li>
49+
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''}/>
50+
<label for="item${i}"> ${plate.text} </label>
51+
</li>
52+
`;
53+
}).join('');
54+
}
55+
function toggleDone(e){
56+
if (!e.target.matches('input')) return; // skip this unless it's an input
57+
const el = e.target;
58+
const index = el.dataset.index;
59+
items[index].done = !items[index].done;
60+
localStorage.setItem('items', JSON.stringify(items));
61+
populateList(items, itemsList);
62+
}
63+
64+
addItems.addEventListener('submit', addItem);
65+
itemsList.addEventListener('click', toggleDone);
66+
populateList(items, itemsList);
3267

3368
</script>
3469

‎15 - LocalStorage/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,12 @@
5959
}
6060

6161
.plates input + label:before {
62-
content: '⬜️';
62+
content: ':(';
6363
margin-right: 10px;
6464
}
6565

6666
.plates input:checked + label:before {
67-
content: '🌮';
67+
content: '(:'
6868
}
6969

7070
.add-items {

0 commit comments

Comments
 (0)