@@ -23,10 +23,17 @@ <h2>LOCAL TAPAS</h2>
23
23
< input type ="text " name ="item " placeholder ="Item Name " required >
24
24
< input type ="submit " value ="+ Add Item ">
25
25
</ 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 >
26
30
</ div >
27
31
28
32
< script >
29
33
const addItems = document . querySelector ( '.add-items' ) ;
34
+ const clearItems = document . querySelector ( '#clear' ) ;
35
+ const checkItems = document . querySelector ( '#checkall' ) ;
36
+
30
37
const itemsList = document . querySelector ( '.plates' ) ;
31
38
const items = JSON . parse ( localStorage . getItem ( 'items' ) ) || [ ] ;
32
39
@@ -75,8 +82,26 @@ <h2>LOCAL TAPAS</h2>
75
82
populateList ( items , itemsList ) ;
76
83
}
77
84
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
+
78
98
// Event Handlers
79
99
addItems . addEventListener ( 'submit' , addItem ) ;
100
+
101
+ clearItems . addEventListener ( 'click' , handleClear ) ;
102
+
103
+ checkItems . addEventListener ( 'click' , checkAll ) ;
104
+
80
105
itemsList . addEventListener ( 'click' , toggleDone ) ;
81
106
82
107
populateList ( items , itemsList ) ;
0 commit comments