Skip to content

Commit a82d6de

Browse files
a1034048590a1034048590
committed
day13-18
1 parent 5a9626f commit a82d6de

6 files changed

Lines changed: 479 additions & 324 deletions

File tree

‎13 - Slide in on Scroll/index-START.html‎

Lines changed: 173 additions & 31 deletions
Large diffs are not rendered by default.

‎14 - JavaScript References VS Copying/index-SOYAINE.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,12 +101,17 @@
101101
}
102102
};
103103

104-
// console.clear();
105-
// console.log(wes);
104+
105+
106+
console.clear();
107+
console.log(wes);
106108

107109
const dev = Object.assign({}, wes);
108110

109111
const dev2 = JSON.parse(JSON.stringify(wes));
112+
wes.name = 'yzh';
113+
114+
console.log(dev, dev2);
110115

111116

112117
</script>

‎15 - LocalStorage/index-START.html‎

Lines changed: 86 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,98 @@
11
<!DOCTYPE html>
22
<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-
<!--
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>LocalStorage</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<!--
1010
Fish SVG Cred:
1111
https://thenounproject.com/search/?q=fish&i=589236
1212
-->
1313

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>
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
xmlns:xlink="http://www.w3.org/1999/xlink"
17+
version="1.1"
18+
x="0px"
19+
y="0px"
20+
viewBox="0 0 512 512"
21+
enable-background="new 0 0 512 512"
22+
xml:space="preserve"
23+
>
24+
<g>
25+
<path
26+
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"
27+
/>
28+
<path
29+
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"
30+
/>
31+
<path
32+
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"
33+
/>
34+
<path
35+
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"
36+
/>
37+
<path
38+
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"
39+
/>
40+
<circle cx="398.8" cy="273.8" r="14.1" />
41+
</g>
42+
</svg>
1543

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>
44+
<div class="wrapper">
45+
<h2>LOCAL TAPAS</h2>
46+
<p></p>
47+
<ul class="plates">
48+
<li>Loading Tapas...</li>
49+
</ul>
50+
<form class="add-items">
51+
<input type="text" name="item" placeholder="Item Name" required />
52+
<input type="submit" value="+ Add Item" />
53+
</form>
54+
</div>
2755

28-
<script>
29-
const addItems = document.querySelector('.add-items');
30-
const itemsList = document.querySelector('.plates');
31-
const items = [];
56+
<script>
57+
const addItems = document.querySelector(".add-items");
58+
const itemsList = document.querySelector(".plates");
59+
const items = JSON.parse(localStorage.getItem("items")) || [];
3260

33-
</script>
61+
function createItemList(_items, _itemsList) {
62+
_itemsList.innerHTML = _items
63+
.map((item, i) => {
64+
return `
65+
<li>
66+
<input type="checkbox" data-index=${i} id="item${i}"
67+
${item.done ? "checked" : ""} >
68+
<label for="item${i}">${item.text}</label>
3469
70+
</li>`;
71+
})
72+
.join("");
73+
}
3574

36-
</body>
37-
</html>
75+
function addItem(e) {
76+
e.preventDefault();
77+
const value = this.querySelector('input[name="item"]').value;
78+
items.push({ text: value, done: false });
79+
localStorage.setItem("items", JSON.stringify(items));
80+
createItemList(items, itemsList);
81+
}
82+
83+
function toggleItem(e) {
84+
// e.target 可能有两种不同的选项
85+
if (!e.target.matches("input")) return;
86+
const el = e.target;
87+
const i = el.dataset.index;
88+
items[i].done = el.checked;
89+
localStorage.setItem("items", JSON.stringify(items));
90+
}
3891

92+
createItemList(items, itemsList);
93+
addItems.addEventListener("submit", addItem);
94+
itemsList.addEventListener("click", toggleItem);
95+
96+
</script>
97+
</body>
98+
</html>

‎16 - Mouse Move Shadow/index-start.html‎

Lines changed: 66 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,69 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Mouse Shadow</title>
6-
</head>
7-
<body>
8-
9-
<div class="hero">
10-
<h1 contenteditable>🔥WOAH!</h1>
11-
</div>
12-
13-
<style>
14-
html {
15-
color:black;
16-
font-family: sans-serif;
17-
}
18-
19-
body {
20-
margin: 0;
21-
}
22-
23-
.hero {
24-
min-height: 100vh;
25-
display:flex;
26-
justify-content: center;
27-
align-items: center;
28-
color:black;
29-
}
30-
31-
h1 {
32-
text-shadow: 10px 10px 0 rgba(0,0,0,1);
33-
font-size: 100px;
34-
}
35-
</style>
36-
37-
<script>
38-
</script>
39-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Mouse Shadow</title>
6+
</head>
7+
<body>
8+
<div class="hero">
9+
<h1 contenteditable>🔥WOAH!</h1>
10+
</div>
11+
12+
<style>
13+
html {
14+
color: black;
15+
font-family: sans-serif;
16+
}
17+
18+
body {
19+
margin: 0;
20+
}
21+
22+
.hero {
23+
min-height: 100vh;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
color: black;
28+
}
29+
30+
h1 {
31+
text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
32+
font-size: 100px;
33+
}
34+
</style>
35+
36+
<script>
37+
(function () {
38+
const hero = document.querySelector(".hero");
39+
const h1 = hero.querySelector("h1");
40+
const length = 300;
41+
42+
function shadowMove(e) {
43+
let { offsetX, offsetY } = e;
44+
if (e.target !== this) {
45+
offsetX += e.target.offsetLeft;
46+
offsetY += e.target.offsetTop;
47+
}
48+
49+
const factorX = Math.floor(
50+
((offsetX / this.offsetWidth) * 2 - 1) * length
51+
); // *2 -1 使百分比范围变为 -1~1
52+
const factorY = Math.floor(
53+
((offsetY / this.offsetWidth) * 2 - 1) * length
54+
);
55+
56+
h1.style.textShadow = `
57+
${-factorX}px ${-factorY}px 5px rgba(255,0,0,0.8),
58+
${-factorX*0.5}px ${factorY*0.5}px 5px rgba(255,255,0,0.8),
59+
${factorX*0.8}px ${-factorY*0.8}px 5px rgba(255,0,255,0.8),
60+
${factorX*1.2}px ${factorY*1.2}px 5px rgba(0,255,255,0.8)
61+
`;
62+
}
63+
64+
hero.addEventListener("mousemove", shadowMove);
65+
})();
66+
</script>
67+
</body>
4068
</html>
69+
0

‎17 - Sort Without Articles/index-start.html‎

Lines changed: 63 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Sort Without Articles</title>
6-
</head>
7-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Sort Without Articles</title>
6+
</head>
7+
<body>
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: sans-serif;
12+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
13+
background-size: cover;
14+
display: flex;
15+
align-items: center;
16+
min-height: 100vh;
17+
}
818

9-
<style>
10-
body {
11-
margin: 0;
12-
font-family: sans-serif;
13-
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
14-
background-size: cover;
15-
display: flex;
16-
align-items: center;
17-
min-height: 100vh;
18-
}
19+
#bands {
20+
list-style: inside square;
21+
font-size: 20px;
22+
background: white;
23+
width: 500px;
24+
margin: auto;
25+
padding: 0;
26+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
27+
}
28+
#bands li {
29+
border-bottom: 1px solid #efefef;
30+
padding: 20px;
31+
}
32+
#bands li:last-child {
33+
border-bottom: 0;
34+
}
1935

20-
#bands {
21-
list-style: inside square;
22-
font-size: 20px;
23-
background: white;
24-
width: 500px;
25-
margin: auto;
26-
padding: 0;
27-
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
28-
}
29-
#bands li {
30-
border-bottom: 1px solid #efefef;
31-
padding: 20px;
32-
}
33-
#bands li:last-child {
34-
border-bottom: 0;
35-
}
36+
a {
37+
color: #ffc600;
38+
text-decoration: none;
39+
}
40+
</style>
3641

37-
a {
38-
color: #ffc600;
39-
text-decoration: none;
40-
}
42+
<ul id="bands"></ul>
4143

42-
</style>
44+
<script>
45+
const bands = [
46+
"The Plot in You",
47+
"The Devil Wears Prada",
48+
"Pierce the Veil",
49+
"Norma Jean",
50+
"The Bled",
51+
"Say Anything",
52+
"The Midway State",
53+
"We Came as Romans",
54+
"Counterparts",
55+
"Oh, Sleeper",
56+
"A Skylit Drive",
57+
"Anywhere But Here",
58+
"An Old Dog",
59+
];
4360

44-
<ul id="bands"></ul>
61+
function delPrefix(item) {
62+
return item.replace(/^(The|A|An)\s{1}/, "");
63+
}
4564

46-
<script>
47-
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
48-
49-
50-
</script>
51-
52-
</body>
65+
const bandsUl = document.getElementById("bands");
66+
bandsUl.innerHTML = bands
67+
.sort((a, b) => (delPrefix(a) > delPrefix(b) ? 1 : -1))
68+
.map((band) => `<li>${band}</li>`)
69+
.join("");
70+
</script>
71+
</body>
5372
</html>

0 commit comments

Comments
 (0)