Skip to content

Commit 975ae0e

Browse files
a90100a90100
committed
add day 5 6 7 8 9 10
1 parent fcadbb8 commit 975ae0e

File tree

32 files changed

+1668
-26
lines changed

32 files changed

+1668
-26
lines changed

Diff for: ‎05 - Flex Panel Gallery/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day5-Flex Panels
2+
一個 flex + transition + JS 控制 click / transition 所做的互動性網頁。個人挺喜歡這個網頁的呈現效果的~~

Diff for: ‎05 - Flex Panel Gallery/index-Harry.html

+47-6
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@
3030
.panels {
3131
min-height: 100vh;
3232
overflow: hidden;
33+
/* 新增的樣式: */
34+
display: flex;
3335
}
3436

3537
.panel {
@@ -41,12 +43,21 @@
4143
/* Safari transitionend event.propertyName === flex */
4244
/* Chrome + FF transitionend event.propertyName === flex-grow */
4345
transition:
44-
font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
46+
/* font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
4547
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
46-
background 0.2s;
48+
transform 0.2s; */
49+
/* 有 font-size，flex 的原因請看程式第 92~96 行 */
50+
51+
/* 使用 all 代替 */
52+
all 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11);
4753
font-size: 20px;
4854
background-size: cover;
4955
background-position: center;
56+
/* 新增的樣式: */
57+
flex: 1;
58+
display: flex;
59+
justify-content: center;
60+
flex-direction: column;
5061
}
5162

5263
.panel1 {
@@ -74,6 +85,11 @@
7485
margin: 0;
7586
width: 100%;
7687
transition: transform 0.5s;
88+
/* 新增的樣式: */
89+
flex: 1;
90+
display: flex;
91+
justify-content: center;
92+
align-items: center;
7793
}
7894

7995
.panel p {
@@ -89,6 +105,22 @@
89105

90106
.panel.open {
91107
font-size: 40px;
108+
/* 新增的樣式: */
109+
flex: 5;
110+
}
111+
112+
/* 新增的樣式: */
113+
.panel>*:first-child {
114+
transform: translateY(-100%);
115+
}
116+
117+
.panel>*:last-child {
118+
transform: translateY(100%);
119+
}
120+
121+
.panel.open-active>*:first-child,
122+
.panel.open-active>*:last-child {
123+
transform: translateY(0);
92124
}
93125
</style>
94126

@@ -122,11 +154,20 @@
122154
</div>
123155

124156
<script>
125-
157+
const panels = document.querySelectorAll('.panel');
158+
159+
panels.forEach(panel => panel.addEventListener('click', function () {
160+
this.classList.toggle('open');
161+
}))
162+
163+
panels.forEach(panel => panel.addEventListener('transitionend', function (e) {
164+
console.log(e.propertyName); // 得知目前 transition 的 CSS 屬性有哪些
165+
if (e.propertyName.includes('flex')) {
166+
this.classList.toggle('open-active');
167+
}
168+
}))
126169
</script>
127170

128-
129-
130171
</body>
131172

132-
</html>
173+
</html>

Diff for: ‎06 - Type Ahead/README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# JS30-Day6-Ajax Type Ahead
2+
輸入特定的城市名片段後會出現 json 檔中符合該名字的城市
3+
4+
## 以下內容是實作中的重點整理:
5+
### 1. (複習)正則表達式
6+
常見的使用方式有兩種:
7+
1. 直接用兩個斜線代表
8+
```javascript
9+
const regex = /\w/gi;
10+
```
11+
2. 建立 RegExp 物件，本實作採用此寫法
12+
```javascript
13+
const regex = new RegExp('\\w+', 'gi');
14+
```
15+
以上兩者是相同的意思
16+
17+
而在處理人口數字的部分，作者使用了千位分隔符，程式碼如下:
18+
```javascript
19+
num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
20+
```
21+
至於此段程式碼的意義，可以參考我之前的發問:
22+
23+
https://ithelp.ithome.com.tw/questions/10195924
24+
25+
### 2. change 監聽事件
26+
這邊要補充的是 change 和 input 事件的比較:
27+
* change: 在`<input>`，`<select>`，和`<textarea>`內的值改變時且不再是 focus 狀態時觸發
28+
* input: `<input>`，`<select>`，和`<textarea>`內的值改變時就會觸發
29+
30+
在此實作中，作者綁定了兩個事件: change & keyup 去搜尋資料，但其實只要使用 input 事件就能達到一樣的效果
31+
32+
### 3. (複習)replace 函式
33+
將一個 str 字串的某個部分用新的字串取代
34+
語法:
35+
```javascript
36+
str.replace(regexp|substr, newSubstr|function)
37+
```

Diff for: ‎06 - Type Ahead/index-Harry.html

+39-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
</head>
99

1010
<body>
11-
1211
<form class="search-form">
1312
<input type="text" class="search" placeholder="City or State">
1413
<ul class="suggestions">
@@ -19,7 +18,45 @@
1918
<script>
2019
const endpoint =
2120
'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
21+
22+
// 取得資料
23+
let cities = [];
24+
fetch(endpoint).then(res => res.json()).then(data => cities = data);
25+
26+
// 尋找符合的資料
27+
function matchCities(searchCity, cities) {
28+
const regex = new RegExp(searchCity, 'gi');
29+
return cities.filter(place => {
30+
return place.city.match(regex) || place.state.match(regex);
31+
})
32+
}
33+
34+
// 將符合的資料加入 html
35+
function addSuggestions() {
36+
const filteredCities = matchCities(this.value, cities);
37+
const addHtml = filteredCities.map(place => {
38+
// 將符合搜尋字串的部分做強調色
39+
const regex = new RegExp(this.value, 'gi');
40+
const cityName = place.city.replace(regex, `<span class="h1">${this.value}</span>`);
41+
const stateName = place.state.replace(regex, `<span class="h1">${this.value}</span>`);
42+
43+
return `<li>
44+
<span class="name">${cityName}, ${stateName}</span>
45+
<span class="population">${addCommas(place.population)}</span>
46+
</li>`
47+
}).join('');
48+
suggestions.innerHTML = addHtml;
49+
}
50+
51+
function addCommas(num) {
52+
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
53+
}
54+
55+
const search = document.querySelector('.search');
56+
const suggestions = document.querySelector('.suggestions');
57+
58+
search.addEventListener('input', addSuggestions);
2259
</script>
2360
</body>
2461

25-
</html>
62+
</html>

Diff for: ‎07 - Array Cardio Day 2/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day7-Array Cardio 2
2+
介紹了幾個陣列的操作練習題目

Diff for: ‎07 - Array Cardio Day 2/index-Harry.html

+16-1
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,30 @@
5454
// Some and Every Checks
5555
// Array.prototype.some() // is at least one person 19 or older?
5656
// Array.prototype.every() // is everyone 19 or older?
57+
console.log(people.some(person => new Date().getFullYear() - person.year > 19));
58+
console.log(people.every(person => new Date().getFullYear() - person.year > 19));
5759

5860
// Array.prototype.find()
5961
// Find is like filter, but instead returns just the one you are looking for
6062
// find the comment with the ID of 823423
63+
console.log(comments.find(comment => {
64+
if (comment.id === 823423) {
65+
return comment;
66+
}
67+
}));
6168

6269
// Array.prototype.findIndex()
6370
// Find the comment with this ID
6471
// delete the comment with the ID of 823423
72+
let getIndex = comments.findIndex(index => {
73+
if (index.id === 823423) {
74+
return index;
75+
}
76+
});
77+
console.log(getIndex);
78+
comments.splice(getIndex, 1);
79+
console.table(comments);
6580
</script>
6681
</body>
6782

68-
</html>
83+
</html>

Diff for: ‎08 - Fun with HTML5 Canvas/README.md

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# JS30-Day8-Fun with HTML5 Canvas
2+
使用 Canvas 讓我們可以在網頁上畫畫的一個小實作
3+
4+
## 以下內容是實作中的步驟:
5+
### 1. 建立 Canvas 畫布
6+
```javascript
7+
// 利用 draw 建立畫布，且畫布的內容是 2d 的
8+
const canvas = document.querySelector('#draw'),
9+
ctx = canvas.getContext('2d');
10+
11+
// 設定畫布大小
12+
canvas.width = window.innerWidth;
13+
canvas.height = window.innerHeight;
14+
```
15+
16+
#### 補充:
17+
因為在這邊看到 innerWidth，innerHeight，所以在此補充一下 innerWidth vs. outerWidth vs. width 的差別:
18+
19+
![](https://i.imgur.com/fu1pM1M.gif)
20+
21+
可以了解到:
22+
* innerWidth: 不包括 border，包括 padding
23+
* outerWidth: 包括 border 和 padding
24+
* width: 只包括該 DOM Element
25+
然後 height 也是一樣的規則喔~~
26+
27+
#### 2. 寫一些繪圖的設定
28+
```javascript
29+
ctx.strokeStyle = '#BADA55'; // 設定勾勒圖形時用的顏色
30+
ctx.lineJoin = 'round'; // 讓線條轉彎時它的拐角是圓的
31+
ctx.lineCap = 'round'; // 讓線條末端是圓的
32+
ctx.lineWidth = 100; // 線條寬度
33+
34+
let isDrawing = false, // 判斷是否繼續繪畫
35+
lastX = 0, // 設定從哪裡開始繪畫/哪裡結束繪畫的初始值
36+
lastY = 0;
37+
```
38+
39+
### 3. 建立繪畫的函式並建立監聽事件
40+
```javascript
41+
function draw(e) {
42+
if(!isDrawing) {
43+
return;
44+
} else {
45+
// 開始畫線
46+
ctx.beginPath();
47+
ctx.moveTo(lastX, lastY);
48+
ctx.lineTo(e.offsetX, e.offsetY);
49+
ctx.stroke();
50+
// 利用解構重新指定 lastX 和 lastY 值
51+
[lastX, lastY] = [e.offsetX, e.offsetY];
52+
}
53+
}
54+
55+
canvas.addEventListener('mousemove', draw);
56+
canvas.addEventListener('mousedown', (e) => {
57+
// 從滑鼠按下的點開始畫
58+
[lastX, lastY] = [e.offsetX, e.offsetY];
59+
isDrawing = true;
60+
});
61+
canvas.addEventListener('mouseup', () => isDrawing = false);
62+
```
63+
此時就能在網頁上繪畫了，下一步是新增一些變化
64+
65+
### 4. 新增繪畫時線條的變化(顏色，線寬)
66+
這邊和原程式碼有些不同，有按照自己的想法修改
67+
```javascript
68+
let hue = 0;
69+
let direction = true;
70+
71+
function draw(e) {
72+
if(!isDrawing) {
73+
return;
74+
} else {
75+
ctx.beginPath();
76+
ctx.moveTo(lastX, lastY);
77+
ctx.lineTo(e.offsetX, e.offsetY);
78+
ctx.stroke();
79+
[lastX, lastY] = [e.offsetX, e.offsetY];
80+
81+
// 控制顏色
82+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
83+
hue+= 10;
84+
85+
// 控制線寬
86+
if(ctx.lineWidth >= 20 || ctx.lineWidth < 5) {
87+
direction = !direction;
88+
}
89+
direction === true ? ctx.lineWidth++ : ctx.lineWidth--;
90+
}
91+
}
92+
```

Diff for: ‎08 - Fun with HTML5 Canvas/index-Harry.html

+45
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,57 @@
99
<body>
1010
<canvas id="draw" width="800" height="800"></canvas>
1111
<script>
12+
const canvas = document.querySelector('#draw'),
13+
ctx = canvas.getContext('2d');
14+
15+
canvas.width = window.innerWidth;
16+
canvas.height = window.innerHeight;
17+
ctx.strokeStyle = '#BADA55';
18+
ctx.lineJoin = 'round';
19+
ctx.lineCap = 'round';
20+
ctx.lineWidth = 10;
21+
22+
let isDrawing = false,
23+
lastX = 0,
24+
lastY = 0,
25+
hue = 0,
26+
direction = true;
27+
28+
function draw(e) {
29+
if(!isDrawing) {
30+
return;
31+
} else {
32+
ctx.beginPath();
33+
ctx.moveTo(lastX, lastY);
34+
ctx.lineTo(e.offsetX, e.offsetY);
35+
ctx.stroke();
36+
[lastX, lastY] = [e.offsetX, e.offsetY];
37+
38+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
39+
hue+= 10;
40+
41+
if(ctx.lineWidth >= 20 || ctx.lineWidth < 5) {
42+
direction = !direction;
43+
}
44+
45+
direction === true ? ctx.lineWidth++ : ctx.lineWidth--;
46+
}
47+
}
48+
49+
canvas.addEventListener('mousemove', draw);
50+
canvas.addEventListener('mousedown', (e) => {
51+
[lastX, lastY] = [e.offsetX, e.offsetY];
52+
isDrawing = true;
53+
});
54+
canvas.addEventListener('mouseup', () => isDrawing = false);
1255
</script>
1356

1457
<style>
1558
html,
1659
body {
1760
margin: 0;
61+
max-width: 100vw;
62+
max-height: 100vh;
1863
}
1964
</style>
2065

0 commit comments

Comments
 (0)