Skip to content

Commit c7a6124

Browse files
nitishdayalnitishdayal
committed
Challenge 15 complete + instantiated readme + update root readme
1 parent 7db7eaa commit c7a6124

File tree

5 files changed

+108
-116
lines changed

5 files changed

+108
-116
lines changed

‎exercises/15 - LocalStorage/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Exercise 15: LocalStorage
2+
Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)
3+
Last Commit Date: Dec 19, 2016
4+
5+
TODO
6+
7+
## Guide
8+
9+
TODO

‎exercises/15 - LocalStorage/index-FINISHED.html‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎exercises/15 - LocalStorage/index-START.html‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎exercises/15 - LocalStorage/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>LocalStorage</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
<!--
12+
Fish SVG Cred:
13+
https://thenounproject.com/search/?q=fish&i=589236
14+
-->
15+
16+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512"
17+
enable-background="new 0 0 512 512" xml:space="preserve">
18+
<g>
19+
<path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7 c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469 L449.4,481.8z"
20+
/>
21+
<path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5 C144.2,115.7,150.5,122,158.3,122z"
22+
/>
23+
<path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5 C231,88.4,237.3,94.7,245.1,94.7z"
24+
/>
25+
<path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5 C317.8,115.7,324.1,122,331.9,122z"
26+
/>
27+
<path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0 c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1 c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8 c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4 c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3 c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3 l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"
28+
/>
29+
<circle cx="398.8" cy="273.8" r="14.1" />
30+
</g>
31+
</svg>
32+
33+
<div class="wrapper">
34+
<h2>LOCAL TAPAS</h2>
35+
<p></p>
36+
<ul class="plates">
37+
<li>Loading Tapas...</li>
38+
</ul>
39+
<form class="add-items" method="POST">
40+
<input type="text" name="item" placeholder="Item Name" required>
41+
<input type="submit" value="+ Add Item">
42+
</form>
43+
</div>
44+
45+
<script>
46+
const addItems = document.querySelector('.add-items'),
47+
itemsList = document.querySelector('.plates'),
48+
items = JSON.parse(localStorage.getItem('dishes')) || [];
49+
50+
const addItem = (e) => {
51+
e.preventDefault()
52+
53+
const text = (e.target.querySelector('[name="item"]')).value,
54+
item = {
55+
text,
56+
done: false
57+
};
58+
59+
items.push(item)
60+
populateList(items, itemsList)
61+
localStorage.setItem('dishes', JSON.stringify(items))
62+
e.target.reset()
63+
}
64+
65+
const populateList = (items, itemsList) => {
66+
if (!(items instanceof Array)) return false
67+
68+
itemsList.innerHTML = items.map((item, i) => {
69+
return `
70+
<li>
71+
<input type="checkbox" data-index=${i} id="item${i}" ${item.done ? 'checked' : ''} />
72+
<label for="item${i}">${item.text}</label>
73+
</li>
74+
`
75+
}).join('')
76+
}
77+
78+
const toggleDone = (e) => {
79+
if (!e.target.matches('input')) return;
80+
81+
const element = e.target,
82+
idx = element.dataset.index;
83+
84+
items[idx].done = !items[idx].done
85+
localStorage.setItem('dishes', JSON.stringify(items))
86+
}
87+
88+
addItems.addEventListener('submit', addItem)
89+
itemsList.addEventListener('click', toggleDone)
90+
91+
document.onload = populateList(items, itemsList)
92+
93+
</script>
94+
95+
96+
</body>
97+
98+
</html>

‎readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Completed written guides can be found in the corresponding challenge directory (
4242
12. [x] ~~[Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/)~~
4343
13. [x] ~~[Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/)~~
4444
14. [x] ~~[JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying)~~
45-
15. [ ] LocalStorage
45+
15. [x] ~~[LocalStorage](./exercises/15\ -\ LocalStorage\)~~
4646
16. [ ] Mouse Move Shadow
4747
17. [ ] Sort Without Articles
4848
18. [ ] Adding Up Times with Reduce

0 commit comments

Comments
 (0)