Added LocalStorage (wesbos#15)

Author: JeffDess

15 - LocalStorage/index-START.html

@@ -22,13 +22,76 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
-    </form>
+			<div class="form-options">
+					<button class="clear-all">Clear All</button>
+					<button class="check-all">Check All</button>
+					<button class="uncheck-all">Uncheck All</button>
+			</div>
+		</form>
   </div>
 
 <script>
-  const addItems = document.querySelector('.add-items');
+	const addItems = document.querySelector('.add-items');
+	const clearAll = document.querySelector('.clear-all');
+	const checkAll = document.querySelector('.check-all');
+	const uncheckAll = document.querySelector('.uncheck-all');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+	const items = JSON.parse(localStorage.getItem('items')) || [];
+	
+	function addItem(e) {
+		e.preventDefault();
+		const text = (this.querySelector('[name=item]')).value;
+		const item = {
+			text,
+			done : false
+		};
+
+		items.push(item);
+		populateList(items, itemsList);
+		localStorage.setItem('items', JSON.stringify(items));
+		this.reset();
+	}
+
+	function populateList(plates = [], platesList) {
+		platesList.innerHTML = plates.map((p, i) => {
+				return `
+				<li>
+					<input type="checkbox" data-index=${i} id="items${i}" ${ p.done ? 'checked' : '' } >
+					<label for="items${i}">${p.text}</label>
+				</li>
+				`;
+		}).join('');
+	}
+
+	function toggleDone(e) {
+		if (!e.target.matches('input')) return;
+		const i = e.target.dataset.index;
+		items[i].done = !items[i].done;
+		localStorage.setItem('items', JSON.stringify(items));
+		populateList(items, itemsList);
+	}
+
+	function clearAllItems(e){
+		e.preventDefault();
+		items.length = 0;
+		localStorage.removeItem('items');
+		populateList(items, itemsList);
+	}
+
+	function massCheck(e, isChecked){
+		e.preventDefault();
+		items.forEach(i => i.done = isChecked);
+		localStorage.setItem('items', JSON.stringify(items));
+		populateList(items, itemsList);
+	}
+
+	addItems.addEventListener('submit', addItem);
+	clearAll.addEventListener('click', clearAllItems);
+	checkAll.addEventListener('click', (e) => massCheck(e, true));
+	uncheckAll.addEventListener('click', (e) => massCheck(e, false));
+	itemsList.addEventListener('click', toggleDone);
+
+	populateList(items, itemsList);
 
 </script>
 

15 - LocalStorage/style.css

@@ -67,12 +67,12 @@
       content: '🌮';
     }
 
-    .add-items {
+    .add-items, .form-options {
       margin-top: 20px;
     }
 
-    .add-items input {
+    input, button {
       padding:10px;
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
-    }
+		}