Skip to content

Commit 9833bed

Browse files
soyainesoyaine
committed
[SYT] start 15
1 parent a9d16bc commit 9833bed

5 files changed

Lines changed: 289 additions & 0 deletions

File tree

‎15 - LocalStorage/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# 15 LocalStorage
2+
3+
> 作者：©[缉熙Soyaine](https://github.com/soyaine)
4+
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 15 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
5+
6+
> 创建时间：2017-07-24
7+
最后更新：2017-07-27
8+
9+
## 实现效果
10+
## 知识点
11+
## 过程指南
12+
13+
默认情况下，在表单空间拥有焦点时按下 Enter 键或者点击提交按钮，会提交表单，提交时浏览器会在将请求发送给服务器之前触发 submit 事件，可以先添加事件监听后看看效果：
14+
```js
15+
function addItem(e) {
16+
console.log('hello');
17+
}
18+
19+
addItems.addEventListener('submit', addItem);
20+
```
21+
结果就是 Console 中闪现 hello 后刷新整个页面，这是 submit 的默认行为，在当前的场景中不适用，先去除。
22+
```js
23+
function addItem(e) {
24+
e.preventDefault();
25+
}
26+
```
27+
28+
29+
this 获取当前 form，是从 submit 事件获取到的。
30+
31+
this.querySelector('[name=item]'); 获取其中的输入框
32+
33+
this.reset();
34+
以清空 input 中正在输入的值

‎15 - LocalStorage/index-FINISHED.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>LocalStorage</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<!--
10+
Fish SVG Cred:
11+
https://thenounproject.com/search/?q=fish&i=589236
12+
-->
13+
14+
<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" enable-background="new 0 0 512 512" xml:space="preserve"><g><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"/><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"/><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"/><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"/><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"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
15+
16+
<div class="wrapper">
17+
<h2>LOCAL TAPAS</h2>
18+
<p></p>
19+
<ul class="plates">
20+
<li>Loading Tapas...</li>
21+
</ul>
22+
<form class="add-items">
23+
<input type="text" name="item" placeholder="Item Name" required>
24+
<input type="submit" value="+ Add Item">
25+
</form>
26+
</div>
27+
28+
<script>
29+
const addItems = document.querySelector('.add-items');
30+
const itemsList = document.querySelector('.plates');
31+
const items = JSON.parse(localStorage.getItem('items')) || [];
32+
33+
function addItem(e) {
34+
e.preventDefault();
35+
const text = (this.querySelector('[name=item]')).value;
36+
const item = {
37+
text,
38+
done: false
39+
};
40+
41+
items.push(item);
42+
populateList(items, itemsList);
43+
localStorage.setItem('items', JSON.stringify(items));
44+
this.reset();
45+
}
46+
47+
function populateList(plates = [], platesList) {
48+
platesList.innerHTML = plates.map((plate, i) => {
49+
return `
50+
<li>
51+
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
52+
<label for="item${i}">${plate.text}</label>
53+
</li>
54+
`;
55+
}).join('');
56+
}
57+
58+
function toggleDone(e) {
59+
if (!e.target.matches('input')) return; // skip this unless it's an input
60+
const el = e.target;
61+
const index = el.dataset.index;
62+
items[index].done = !items[index].done;
63+
localStorage.setItem('items', JSON.stringify(items));
64+
populateList(items, itemsList);
65+
}
66+
67+
addItems.addEventListener('submit', addItem);
68+
itemsList.addEventListener('click', toggleDone);
69+
70+
populateList(items, itemsList);
71+
72+
</script>
73+
74+
75+
</body>
76+
</html>
77+

‎15 - LocalStorage/index-SOYAINE.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>LocalStorage</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<!--
10+
Fish SVG Cred:
11+
https://thenounproject.com/search/?q=fish&i=589236
12+
-->
13+
14+
<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" enable-background="new 0 0 512 512" xml:space="preserve"><g><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"/><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"/><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"/><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"/><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"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
15+
16+
<div class="wrapper">
17+
<h2>LOCAL TAPAS</h2>
18+
<p></p>
19+
<ul class="plates">
20+
<li>Loading Tapas...</li>
21+
</ul>
22+
<form class="add-items">
23+
<input type="text" name="item" placeholder="Item Name" required>
24+
<input type="submit" value="+ Add Item">
25+
</form>
26+
</div>
27+
28+
<script>
29+
const addItems = document.querySelector('.add-items');
30+
const itemsList = document.querySelector('.plates');
31+
const items = [];
32+
33+
function addItem(e) {
34+
e.preventDefault();
35+
const text = this.querySelector('[name=item]').value;
36+
const item = {
37+
text: text,
38+
done: false
39+
}
40+
items.push(item);
41+
this.reset();
42+
populateList(items, itemsList);
43+
console.log(text);
44+
}
45+
46+
function populateList(plates = [], plateslist) {
47+
plateslist.innerHTML = plates.map((plate, i) => {
48+
return `
49+
<li>
50+
<label>${plate.text}</label>
51+
</li>
52+
`;
53+
}).join('');
54+
}
55+
56+
addItems.addEventListener('submit', addItem);
57+
58+
</script>
59+
60+
61+
</body>
62+
</html>

‎15 - LocalStorage/index-START.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>LocalStorage</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<!--
10+
Fish SVG Cred:
11+
https://thenounproject.com/search/?q=fish&i=589236
12+
-->
13+
14+
<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" enable-background="new 0 0 512 512" xml:space="preserve"><g><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"/><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"/><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"/><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"/><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"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
15+
16+
<div class="wrapper">
17+
<h2>LOCAL TAPAS</h2>
18+
<p></p>
19+
<ul class="plates">
20+
<li>Loading Tapas...</li>
21+
</ul>
22+
<form class="add-items">
23+
<input type="text" name="item" placeholder="Item Name" required>
24+
<input type="submit" value="+ Add Item">
25+
</form>
26+
</div>
27+
28+
<script>
29+
const addItems = document.querySelector('.add-items');
30+
const itemsList = document.querySelector('.plates');
31+
const items = [];
32+
33+
</script>
34+
35+
36+
</body>
37+
</html>
38+

‎15 - LocalStorage/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
html {
3+
box-sizing: border-box;
4+
background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat;
5+
background-size:cover;
6+
min-height:100vh;
7+
display:flex;
8+
justify-content: center;
9+
align-items: center;
10+
text-align: center;
11+
font-family: Futura,"Trebuchet MS",Arial,sans-serif
12+
}
13+
*, *:before, *:after {box-sizing: inherit; }
14+
15+
svg {
16+
fill:white;
17+
background: rgba(0,0,0,0.1);
18+
padding: 20px;
19+
border-radius: 50%;
20+
width:200px;
21+
margin-bottom: 50px;
22+
}
23+
24+
.wrapper {
25+
padding: 20px;
26+
max-width: 350px;
27+
background: rgba(255,255,255,0.95);
28+
box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
29+
}
30+
31+
h2 {
32+
text-align: center;
33+
margin: 0;
34+
font-weight: 200;
35+
}
36+
37+
.plates {
38+
margin: 0;
39+
padding: 0;
40+
text-align: left;
41+
list-style: none;
42+
}
43+
44+
.plates li {
45+
border-bottom: 1px solid rgba(0,0,0,0.2);
46+
padding: 10px 0;
47+
font-weight: 100;
48+
display: flex;
49+
}
50+
51+
.plates label {
52+
flex:1;
53+
cursor: pointer;
54+
55+
}
56+
57+
.plates input {
58+
display: none;
59+
}
60+
61+
.plates input + label:before {
62+
content: '⬜️';
63+
margin-right: 10px;
64+
}
65+
66+
.plates input:checked + label:before {
67+
content: '🌮';
68+
}
69+
70+
.add-items {
71+
margin-top: 20px;
72+
}
73+
74+
.add-items input {
75+
padding:10px;
76+
outline:0;
77+
border:1px solid rgba(0,0,0,0.1);
78+
}

0 commit comments

Comments
 (0)