Skip to content

Commit 3dd7c2b

Browse files
committed
Added Clear Form and Check/Uncheck All Buttons to wesbos#15
1 parent 62c4db1 commit 3dd7c2b

File tree

2 files changed

+36
-2
lines changed

2 files changed

+36
-2
lines changed

15 - LocalStorage/index-START.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,17 @@ <h2>LOCAL TAPAS</h2>
2323
<input type="text" name="item" placeholder="Item Name" required>
2424
<input type="submit" value="+ Add Item">
2525
</form>
26+
<div class="buttons">
27+
<input type="button" id="clear" value="〄 Clear">
28+
<input type="button" id="checkall" value="✔️ Check/Uncheck All">
29+
</div>
2630
</div>
2731

2832
<script>
2933
const addItems = document.querySelector('.add-items');
34+
const clearItems = document.querySelector('#clear');
35+
const checkItems = document.querySelector('#checkall');
36+
3037
const itemsList = document.querySelector('.plates');
3138
const items = JSON.parse(localStorage.getItem('items')) || [];
3239

@@ -75,8 +82,26 @@ <h2>LOCAL TAPAS</h2>
7582
populateList(items, itemsList);
7683
}
7784

85+
function handleClear() {
86+
var newItems = localStorage.removeItem("items");
87+
populateList(newItems, itemsList);
88+
}
89+
90+
function checkAll(e) {
91+
for (var item in items) {
92+
items[item].done = !items[item].done;
93+
}
94+
localStorage.setItem('items', JSON.stringify(items));
95+
populateList(items,itemsList);
96+
}
97+
7898
// Event Handlers
7999
addItems.addEventListener('submit', addItem);
100+
101+
clearItems.addEventListener('click', handleClear);
102+
103+
checkItems.addEventListener('click', checkAll);
104+
80105
itemsList.addEventListener('click', toggleDone);
81106

82107
populateList(items, itemsList);

15 - LocalStorage/style.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,9 @@ h2 {
4949
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
5050
padding: 10px 0;
5151
font-weight: 100;
52-
display: flex;
5352
}
5453

5554
.plates label {
56-
flex: 1;
5755
cursor: pointer;
5856
}
5957

@@ -79,3 +77,14 @@ h2 {
7977
outline: 0;
8078
border: 1px solid rgba(0, 0, 0, 0.1);
8179
}
80+
81+
.buttons {
82+
margin-top: 1em;
83+
/* border: 1px solid red; */
84+
display: flex;
85+
}
86+
87+
.buttons input {
88+
flex: 1;
89+
margin-left: 0.5em;
90+
}

0 commit comments

Comments
 (0)