Skip to content

Commit 779be10

Browse files
vaisvais
committed
Play around with localStorage
1 parent 31c9ad8 commit 779be10

File tree

2 files changed

+196
-0
lines changed

2 files changed

+196
-0
lines changed

‎15 - LocalStorage/index.html

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title></title>
6+
<style>
7+
*,
8+
*:before,
9+
*:after {
10+
box-sizing: border-box;
11+
}
12+
html,
13+
body {
14+
height: 100%;
15+
margin: 0;
16+
}
17+
body {
18+
background-image: url(oh-la-la.jpeg);
19+
background-position: center;
20+
background-repeat: no-repeat;
21+
background-size: cover;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
padding: 20px;
27+
gap: 20px;
28+
font-family: Futura, sans-serif;
29+
color: #333;
30+
}
31+
.logo {
32+
width: 200px;
33+
background-color: rgba(0, 0, 0, 0.2);
34+
padding: 30px;
35+
border-radius: 50%;
36+
}
37+
.logo > svg {
38+
fill: white;
39+
}
40+
.wrapper {
41+
background-color: #fafafa;
42+
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);
43+
border-radius: 2px;
44+
display: flex;
45+
flex-direction: column;
46+
padding: 20px;
47+
overflow: auto;
48+
}
49+
.wrapper > h1 {
50+
margin: 0;
51+
text-transform: uppercase;
52+
font-size: 1.5rem;
53+
text-align: center;
54+
font-weight: 200;
55+
}
56+
.wrapper > ul {
57+
padding: 0;
58+
margin: 0;
59+
overflow: auto;
60+
}
61+
li {
62+
list-style-type: none;
63+
padding: 10px 0;
64+
border-bottom: solid #aaa 1px;
65+
}
66+
li:last-of-type {
67+
border-bottom: revert;
68+
}
69+
input {
70+
padding: 10px;
71+
border: solid #cacaca 1px;
72+
}
73+
li > label {
74+
user-select: none;
75+
}
76+
li > input[type="checkbox"] {
77+
display: none;
78+
}
79+
li > input + label:before {
80+
margin-right: 10px;
81+
content: "⬜️";
82+
}
83+
li > input:checked + label:before {
84+
content: "💩";
85+
}
86+
</style>
87+
</head>
88+
<body>
89+
<div class="logo">
90+
<svg
91+
xmlns="http://www.w3.org/2000/svg"
92+
xmlns:xlink="http://www.w3.org/1999/xlink"
93+
version="1.1"
94+
x="0px"
95+
y="0px"
96+
viewBox="0 0 512 512"
97+
enable-background="new 0 0 512 512"
98+
xml:space="preserve"
99+
>
100+
<g>
101+
<path
102+
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"
103+
/>
104+
<path
105+
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"
106+
/>
107+
<path
108+
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"
109+
/>
110+
<path
111+
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"
112+
/>
113+
<path
114+
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"
115+
/>
116+
<circle cx="398.8" cy="273.8" r="14.1" />
117+
</g>
118+
</svg>
119+
</div>
120+
<div class="wrapper">
121+
<h1>Local Tapas</h1>
122+
<ul>
123+
<li>Loading Tapas...</li>
124+
</ul>
125+
<form>
126+
<input type="text" autofocus />
127+
<input type="submit" value="+Add Item" />
128+
</form>
129+
</div>
130+
<script>
131+
let items;
132+
133+
try {
134+
items = JSON.parse(localStorage.getItem("items")) || [];
135+
} catch (e) {
136+
items = [];
137+
}
138+
139+
const form = document.querySelector("form");
140+
const list = document.querySelector("ul");
141+
142+
const renderItem = (item, index) => `
143+
<input type="checkbox"
144+
id="item${index}"
145+
data-index=${index}
146+
${item.done ? "checked" : ""}
147+
>
148+
<label for="item${index}">
149+
${item.text}
150+
</label>
151+
`;
152+
153+
const renderList = () => {
154+
list.innerHTML = items.length
155+
? items.reduce(
156+
(html, item, index) =>
157+
`${html}<li>${renderItem(item, index)}</li>`,
158+
""
159+
)
160+
: "<li style='text-align: center;'>Order our delicious tapas here!</li>";
161+
};
162+
163+
const addItem = (e) => {
164+
e.preventDefault();
165+
const text = form.querySelector("input[type=text]").value;
166+
if (!text) {
167+
return;
168+
}
169+
items.push({ text, done: false });
170+
renderList();
171+
saveItems();
172+
form.reset();
173+
list.querySelector("li:last-child").scrollIntoView();
174+
};
175+
176+
const updateItem = (e) => {
177+
if (e.target.type !== "checkbox") {
178+
return;
179+
}
180+
const item = items[e.target.dataset.index];
181+
item.done = e.target.checked;
182+
saveItems();
183+
};
184+
185+
const saveItems = () => {
186+
localStorage.setItem("items", JSON.stringify(items));
187+
};
188+
189+
form.addEventListener("submit", addItem);
190+
list.addEventListener("click", updateItem);
191+
192+
renderList();
193+
</script>
194+
</body>
195+
</html>

‎index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
12. [Key Sequence Detection](https://vais.github.io/JavaScript30/12 - Key Sequence Detection/index.html)
1515
13. [Slide in on Scroll](https://vais.github.io/JavaScript30/13 - Slide in on Scroll/index.html)
1616
14. [JavaScript References VS Copying](https://vais.github.io/JavaScript30/14 - JavaScript References VS Copying/index.html)
17+
15. [LocalStorage](https://vais.github.io/JavaScript30/15 - LocalStorage/index.html)

0 commit comments

Comments
 (0)