Skip to content

Commit 2a5b549

Browse files
a90100a90100
committed
fix 13_1
1 parent be9ca17 commit 2a5b549

File tree

13 files changed

+265
-56
lines changed

13 files changed

+265
-56
lines changed

Diff for: ‎20 - Speech Detection/README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# JS30-Day20-Native Speech Recognition
2+
一個可以透過語音輸入文字的實作
3+
4+
## 重點整理
5+
### 1. 建立語音辨識的物件
6+
**SpeechRecognition** 為一個 Web Speech API
7+
```javascript
8+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
9+
const recognition = new SpeechRecognition();
10+
```
11+
12+
### 2. interimResults 設定語音輸入的是否會立即辨試
13+
範例:
14+
```javascript
15+
recognition.interimResults = true;
16+
```
17+
18+
### 3. result 事件
19+
當 SpeechRecognition 回傳結果(文字或段落)時觸發
20+
21+
### 4. end 事件
22+
當 SpeechRecognition 的連接中斷(不再說話時)觸發
23+
24+
### 5. HTML 屬性: contenteditable
25+
加上這個屬性之後，該 DOM 元素可以像 input 標籤一樣被編輯
26+
```javascript
27+
<div class="words" contenteditable="true"></div>
28+
```

Diff for: ‎20 - Speech Detection/index-Harry.html

+32-10
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,6 @@
77
</head>
88

99
<body>
10-
11-
<div class="words" contenteditable>
12-
</div>
13-
14-
<script>
15-
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
16-
</script>
17-
18-
1910
<style>
2011
html {
2112
font-size: 10px;
@@ -57,6 +48,37 @@
5748
}
5849
</style>
5950

51+
<div class="words" contenteditable>
52+
</div>
53+
54+
<script>
55+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
56+
57+
const recognition = new SpeechRecognition();
58+
recognition.interimResults = true;
59+
recognition.lang = 'en-US';
60+
61+
const words = document.querySelector('.words');
62+
let p = document.createElement('p');
63+
words.appendChild(p);
64+
65+
recognition.addEventListener('result', function (e) {
66+
const transcript = Array.from(e.results)
67+
.map(result => result[0])
68+
.map(result => result.transcript).join('');
69+
70+
const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
71+
p.textContent = poopScript;
72+
73+
if(e.results[0].isFinal) {
74+
p = document.createElement('p');
75+
words.appendChild(p);
76+
}
77+
})
78+
79+
recognition.addEventListener('end', recognition.start);
80+
recognition.start();
81+
</script>
6082
</body>
6183

62-
</html>
84+
</html>

Diff for: ‎21 - Geolocation/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# JS30-Day21-Geolocation based Speedometer and Compass
2+
利用取得使用者位置來顯示方向和速度的一個實作
3+
4+
## 重點整理
5+
### 1. Navigator.geolocation
6+
這是用來取得使用者位置資訊的 Web API，在此實作中搭配了 watchPosition() 方法來監控使用者位置
7+
```javascript
8+
navigator.geolocation.watchPosition((data) => {
9+
// do something...
10+
}, (err) => {
11+
// do something...
12+
});
13+
```

Diff for: ‎21 - Geolocation/index-Harry.html

+37-27
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,6 @@
88
</head>
99

1010
<body>
11-
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px"
12-
y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
13-
<g>
14-
<path fill="#ffffff"
15-
d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176 S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155 l-2.298-3.718v3.718h-1.069V3.988z M9.323,33.917H8.102l-1.136-4.262l-1.132,4.262H4.587l-1.361-5.701h1.178l0.859,3.916 l1.042-3.916h1.369l0.999,3.982l0.875-3.982h1.159L9.323,33.917z M33.995,59.828c-0.181,0.285-0.438,0.497-0.77,0.636 c-0.332,0.139-0.745,0.208-1.241,0.208c-0.721,0-1.274-0.167-1.661-0.5c-0.386-0.333-0.617-0.819-0.692-1.456l1.12-0.109 c0.067,0.376,0.204,0.652,0.41,0.828c0.206,0.176,0.484,0.264,0.834,0.264c0.371,0,0.65-0.078,0.838-0.235 c0.188-0.157,0.282-0.34,0.282-0.55c0-0.135-0.04-0.25-0.119-0.344c-0.079-0.095-0.217-0.177-0.414-0.247 c-0.135-0.047-0.442-0.13-0.922-0.249c-0.617-0.153-1.05-0.341-1.299-0.564c-0.35-0.314-0.525-0.696-0.525-1.147 c0-0.29,0.082-0.562,0.247-0.815c0.165-0.253,0.402-0.445,0.712-0.577c0.31-0.132,0.684-0.198,1.122-0.198 c0.716,0,1.254,0.157,1.616,0.471c0.362,0.314,0.552,0.733,0.57,1.256l-1.151,0.051c-0.049-0.293-0.155-0.504-0.317-0.632 c-0.162-0.128-0.405-0.193-0.729-0.193c-0.334,0-0.596,0.069-0.786,0.206c-0.122,0.088-0.183,0.206-0.183,0.354 c0,0.135,0.057,0.25,0.171,0.346c0.145,0.122,0.498,0.249,1.058,0.381c0.56,0.132,0.974,0.269,1.243,0.41 c0.268,0.141,0.478,0.334,0.63,0.58c0.152,0.245,0.227,0.548,0.227,0.908C34.267,59.237,34.176,59.543,33.995,59.828z M32,52.795 c-11.466,0-20.795-9.329-20.795-20.795c0-11.466,9.329-20.795,20.795-20.795S52.795,20.534,52.795,32 C52.795,43.466,43.466,52.795,32,52.795z M55.014,33.917v-5.701h4.227v0.965h-3.076v1.264h2.862v0.96h-2.862v1.552h3.185v0.961 H55.014z" />
16-
<g>
17-
<path fill="#000000"
18-
d="M48.904,31.863c-4.074-1.358-8.148-2.717-12.226-4.066c-0.265-0.087-0.399-0.223-0.486-0.486 c-1.349-4.077-2.708-8.151-4.066-12.226c-0.029-0.087-0.074-0.169-0.132-0.3c-0.054,0.152-0.09,0.245-0.122,0.34 c-1.352,4.053-2.707,8.104-4.048,12.161c-0.096,0.292-0.246,0.428-0.532,0.522c-4.056,1.342-8.108,2.696-12.16,4.049 c-0.097,0.032-0.189,0.074-0.344,0.137c0.172,0.06,0.267,0.093,0.362,0.125c4.074,1.358,8.148,2.717,12.224,4.072 c0.204,0.068,0.337,0.158,0.412,0.386c1.243,3.757,2.498,7.511,3.75,11.265c0.144,0.432,0.291,0.862,0.463,1.373 c0.068-0.185,0.108-0.285,0.142-0.386c1.349-4.042,2.701-8.083,4.04-12.128c0.094-0.284,0.231-0.438,0.523-0.534 c4.056-1.341,8.108-2.696,12.161-4.048c0.099-0.033,0.195-0.076,0.347-0.137C49.067,31.925,48.987,31.891,48.904,31.863z M37.475,32.038c-1.316,0.439-2.631,0.879-3.947,1.314c-0.095,0.031-0.139,0.081-0.17,0.173c-0.434,1.313-0.873,2.625-1.311,3.937 c-0.012,0.033-0.024,0.066-0.046,0.126c-0.056-0.166-0.104-0.306-0.15-0.446c-0.407-1.219-0.814-2.437-1.218-3.657 c-0.025-0.074-0.068-0.104-0.134-0.125c-1.323-0.44-2.646-0.881-3.968-1.322c-0.031-0.01-0.062-0.022-0.118-0.041 c0.05-0.02,0.081-0.034,0.112-0.045c1.315-0.439,2.631-0.879,3.947-1.314c0.093-0.03,0.142-0.075,0.173-0.17 c0.435-1.316,0.875-2.632,1.314-3.947c0.01-0.031,0.022-0.062,0.039-0.11c0.019,0.042,0.033,0.069,0.043,0.097 c0.441,1.323,0.882,2.645,1.321,3.969c0.028,0.085,0.072,0.129,0.158,0.158c1.324,0.438,2.646,0.879,3.969,1.32 c0.027,0.009,0.053,0.02,0.1,0.038C37.538,32.013,37.507,32.027,37.475,32.038z" />
19-
<path fill="#000000"
20-
d="M24.436,27.633c-1.069-2.137-2.119-4.237-3.216-6.43c2.189,1.094,4.292,2.145,6.433,3.216 c-0.359,0.713-0.706,1.404-1.057,2.091c-0.023,0.045-0.078,0.082-0.127,0.106C25.807,26.949,25.143,27.28,24.436,27.633z" />
21-
<path fill="#000000"
22-
d="M39.573,27.632c-0.696-0.348-1.351-0.673-2.002-1.005c-0.076-0.038-0.155-0.104-0.193-0.177 c-0.338-0.661-0.666-1.326-1.019-2.033c2.121-1.061,4.228-2.115,6.43-3.217C41.69,23.399,40.635,25.509,39.573,27.632z" />
23-
<path fill="#000000"
24-
d="M24.436,36.339c0.712,0.357,1.394,0.698,2.074,1.043c0.046,0.024,0.088,0.073,0.113,0.121 c0.339,0.671,0.674,1.345,1.028,2.051c-2.126,1.063-4.232,2.117-6.43,3.216C22.317,40.577,23.37,38.472,24.436,36.339z" />
25-
<path fill="#000000"
26-
d="M36.358,39.555c0.354-0.707,0.688-1.38,1.028-2.05c0.028-0.056,0.084-0.111,0.14-0.139 c0.67-0.339,1.343-0.674,2.047-1.026c1.066,2.131,2.118,4.235,3.215,6.43C40.601,41.676,38.503,40.628,36.358,39.555z" />
27-
</g>
28-
</g>
29-
</svg>
30-
31-
32-
<h1 class="speed">
33-
<span class="speed-value">0</span>
34-
<span class="units">KM/H</span>
35-
</h1>
36-
3711
<style>
3812
html {
3913
font-size: 100px;
@@ -79,8 +53,44 @@ <h1 class="speed">
7953

8054
/*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
8155
</style>
56+
57+
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px"
58+
y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
59+
<g>
60+
<path fill="#ffffff"
61+
d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176 S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155 l-2.298-3.718v3.718h-1.069V3.988z M9.323,33.917H8.102l-1.136-4.262l-1.132,4.262H4.587l-1.361-5.701h1.178l0.859,3.916 l1.042-3.916h1.369l0.999,3.982l0.875-3.982h1.159L9.323,33.917z M33.995,59.828c-0.181,0.285-0.438,0.497-0.77,0.636 c-0.332,0.139-0.745,0.208-1.241,0.208c-0.721,0-1.274-0.167-1.661-0.5c-0.386-0.333-0.617-0.819-0.692-1.456l1.12-0.109 c0.067,0.376,0.204,0.652,0.41,0.828c0.206,0.176,0.484,0.264,0.834,0.264c0.371,0,0.65-0.078,0.838-0.235 c0.188-0.157,0.282-0.34,0.282-0.55c0-0.135-0.04-0.25-0.119-0.344c-0.079-0.095-0.217-0.177-0.414-0.247 c-0.135-0.047-0.442-0.13-0.922-0.249c-0.617-0.153-1.05-0.341-1.299-0.564c-0.35-0.314-0.525-0.696-0.525-1.147 c0-0.29,0.082-0.562,0.247-0.815c0.165-0.253,0.402-0.445,0.712-0.577c0.31-0.132,0.684-0.198,1.122-0.198 c0.716,0,1.254,0.157,1.616,0.471c0.362,0.314,0.552,0.733,0.57,1.256l-1.151,0.051c-0.049-0.293-0.155-0.504-0.317-0.632 c-0.162-0.128-0.405-0.193-0.729-0.193c-0.334,0-0.596,0.069-0.786,0.206c-0.122,0.088-0.183,0.206-0.183,0.354 c0,0.135,0.057,0.25,0.171,0.346c0.145,0.122,0.498,0.249,1.058,0.381c0.56,0.132,0.974,0.269,1.243,0.41 c0.268,0.141,0.478,0.334,0.63,0.58c0.152,0.245,0.227,0.548,0.227,0.908C34.267,59.237,34.176,59.543,33.995,59.828z M32,52.795 c-11.466,0-20.795-9.329-20.795-20.795c0-11.466,9.329-20.795,20.795-20.795S52.795,20.534,52.795,32 C52.795,43.466,43.466,52.795,32,52.795z M55.014,33.917v-5.701h4.227v0.965h-3.076v1.264h2.862v0.96h-2.862v1.552h3.185v0.961 H55.014z" />
62+
<g>
63+
<path fill="#000000"
64+
d="M48.904,31.863c-4.074-1.358-8.148-2.717-12.226-4.066c-0.265-0.087-0.399-0.223-0.486-0.486 c-1.349-4.077-2.708-8.151-4.066-12.226c-0.029-0.087-0.074-0.169-0.132-0.3c-0.054,0.152-0.09,0.245-0.122,0.34 c-1.352,4.053-2.707,8.104-4.048,12.161c-0.096,0.292-0.246,0.428-0.532,0.522c-4.056,1.342-8.108,2.696-12.16,4.049 c-0.097,0.032-0.189,0.074-0.344,0.137c0.172,0.06,0.267,0.093,0.362,0.125c4.074,1.358,8.148,2.717,12.224,4.072 c0.204,0.068,0.337,0.158,0.412,0.386c1.243,3.757,2.498,7.511,3.75,11.265c0.144,0.432,0.291,0.862,0.463,1.373 c0.068-0.185,0.108-0.285,0.142-0.386c1.349-4.042,2.701-8.083,4.04-12.128c0.094-0.284,0.231-0.438,0.523-0.534 c4.056-1.341,8.108-2.696,12.161-4.048c0.099-0.033,0.195-0.076,0.347-0.137C49.067,31.925,48.987,31.891,48.904,31.863z M37.475,32.038c-1.316,0.439-2.631,0.879-3.947,1.314c-0.095,0.031-0.139,0.081-0.17,0.173c-0.434,1.313-0.873,2.625-1.311,3.937 c-0.012,0.033-0.024,0.066-0.046,0.126c-0.056-0.166-0.104-0.306-0.15-0.446c-0.407-1.219-0.814-2.437-1.218-3.657 c-0.025-0.074-0.068-0.104-0.134-0.125c-1.323-0.44-2.646-0.881-3.968-1.322c-0.031-0.01-0.062-0.022-0.118-0.041 c0.05-0.02,0.081-0.034,0.112-0.045c1.315-0.439,2.631-0.879,3.947-1.314c0.093-0.03,0.142-0.075,0.173-0.17 c0.435-1.316,0.875-2.632,1.314-3.947c0.01-0.031,0.022-0.062,0.039-0.11c0.019,0.042,0.033,0.069,0.043,0.097 c0.441,1.323,0.882,2.645,1.321,3.969c0.028,0.085,0.072,0.129,0.158,0.158c1.324,0.438,2.646,0.879,3.969,1.32 c0.027,0.009,0.053,0.02,0.1,0.038C37.538,32.013,37.507,32.027,37.475,32.038z" />
65+
<path fill="#000000"
66+
d="M24.436,27.633c-1.069-2.137-2.119-4.237-3.216-6.43c2.189,1.094,4.292,2.145,6.433,3.216 c-0.359,0.713-0.706,1.404-1.057,2.091c-0.023,0.045-0.078,0.082-0.127,0.106C25.807,26.949,25.143,27.28,24.436,27.633z" />
67+
<path fill="#000000"
68+
d="M39.573,27.632c-0.696-0.348-1.351-0.673-2.002-1.005c-0.076-0.038-0.155-0.104-0.193-0.177 c-0.338-0.661-0.666-1.326-1.019-2.033c2.121-1.061,4.228-2.115,6.43-3.217C41.69,23.399,40.635,25.509,39.573,27.632z" />
69+
<path fill="#000000"
70+
d="M24.436,36.339c0.712,0.357,1.394,0.698,2.074,1.043c0.046,0.024,0.088,0.073,0.113,0.121 c0.339,0.671,0.674,1.345,1.028,2.051c-2.126,1.063-4.232,2.117-6.43,3.216C22.317,40.577,23.37,38.472,24.436,36.339z" />
71+
<path fill="#000000"
72+
d="M36.358,39.555c0.354-0.707,0.688-1.38,1.028-2.05c0.028-0.056,0.084-0.111,0.14-0.139 c0.67-0.339,1.343-0.674,2.047-1.026c1.066,2.131,2.118,4.235,3.215,6.43C40.601,41.676,38.503,40.628,36.358,39.555z" />
73+
</g>
74+
</g>
75+
</svg>
76+
77+
78+
<h1 class="speed">
79+
<span class="speed-value">0</span>
80+
<span class="units">KM/H</span>
81+
</h1>
82+
8283
<script>
84+
const arrow = document.querySelector('.arrow');
85+
const speed = document.querySelector('.speed-value');
86+
87+
navigator.geolocation.watchPosition(data => {
88+
speed.textContent = data.coords.speed;
89+
arrow.style.transform = `rotate(${data.coords.heading}deg)`;
90+
}, err => {
91+
console.error(err);
92+
})
8393
</script>
8494
</body>
8595

86-
</html>
96+
</html>

Diff for: ‎22 - Follow Along Link Highlighter/README.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# JS30-Day22-Follow Along Links
2+
一個 hover 連結時會出現效果的實作
3+
4+
## 重點整理
5+
### 1. element.getBoundingClientRect()
6+
此方法會回傳選擇到的 DOM 元素的大小和位置
7+
8+
範例:
9+
```javascript
10+
const linkCoords = this.getBoundingClientRect();
11+
```
12+
13+
### 2. 補充: mouse 事件
14+
1. mouseenter: 滑鼠移入元素觸發
15+
2. mouseleave: 滑鼠移出元素觸發
16+
3. mouseover: 滑鼠移入元素觸發，移入移出其子元素也會觸發
17+
4. mouseout: 滑鼠移出元素觸發，移入移出其子元素也會觸發
18+
19+
範例: 可以打開 codepen console 玩玩看
20+
https://codepen.io/a90100/pen/abOKgMR?editors=1011
21+
22+
### 3. 取得瀏覽器捲軸位置
23+
```javascript
24+
window.scrollY
25+
window.scrollX
26+
```

Diff for: ‎22 - Follow Along Link Highlighter/index-Harry.html

+22-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,28 @@
3333
</div>
3434

3535
<script>
36-
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
36+
const links = document.querySelectorAll('a');
37+
const hightlight = document.createElement('span');
38+
hightlight.classList.add('highlight');
39+
document.body.appendChild(hightlight);
40+
41+
function hightlightLink(e) {
42+
const linkCoords = this.getBoundingClientRect();
43+
console.log(linkCoords);
44+
45+
const coords = {
46+
width: linkCoords.width,
47+
height: linkCoords.height,
48+
top: linkCoords.top + window.scrollY,
49+
left: linkCoords.left + window.scrollX
50+
}
51+
52+
hightlight.style.width = `${coords.width}px`;
53+
hightlight.style.height = `${coords.height}px`;
54+
hightlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
55+
}
56+
57+
links.forEach(link => link.addEventListener('mouseenter', hightlightLink));
3758
</script>
3859
</body>
3960

Diff for: ‎23 - Speech Synthesis/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# JS30-Day23-Speech Synthesis
2+
一個將輸入的文字轉語音的實作，還可以控制音調和速度
3+
4+
## 重點整理
5+
### 1. SpeechSynthesisUtterance
6+
為 Web Speech API，可以藉由它讀出指定的文字，還可以設定語言，音量，音調
7+
8+
範例:
9+
```javascript
10+
const msg = new SpeechSynthesisUtterance();
11+
```
12+
13+
[MDN 介紹](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance)
14+
15+
### 2. SpeechSynthesis
16+
為 Web Speech API，上面提到 SpeechSynthesisUtterance 是可以輸出語音，調整音量，音調和選擇語言，那麼 **SpeechSynthesis 就是用來控制語音的撥放和暫停及移除語音資訊的 API**
17+
18+
[MDN 介紹](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)

Diff for: ‎23 - Speech Synthesis/index-Harry.html

+37-1
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,44 @@ <h1>The Voiceinator 5000</h1>
3737
const options = document.querySelectorAll('[type="range"], [name="text"]');
3838
const speakButton = document.querySelector('#speak');
3939
const stopButton = document.querySelector('#stop');
40+
// 預設 msg 物件的 text 值
41+
msg.text = document.querySelector('[name="text"]');
42+
43+
// 取得下拉選單出現的語言
44+
function populateVoices() {
45+
voices = this.getVoices();
46+
voicesDropdown.innerHTML = voices.filter(voice => voice.lang.includes('en'))
47+
.map(voice => `<option value="${voice.name}">${voice.name} (${voice.value})</option>`).join('');
48+
}
49+
50+
function setVoice() {
51+
msg.voice = voices.find(voice => voice.name === this.value);
52+
toggle();
53+
}
54+
55+
function toggle(startOver = true) {
56+
speechSynthesis.cancel();
57+
if (startOver) {
58+
speechSynthesis.speak(msg);
59+
}
60+
}
61+
62+
function setOption() {
63+
msg[this.name] = this.value;
64+
toggle();
65+
}
66+
67+
speechSynthesis.addEventListener('voiceschanged', populateVoices);
68+
voicesDropdown.addEventListener('change', setVoice);
69+
options.forEach(option => option.addEventListener('change', setOption));
70+
speakButton.addEventListener('click', toggle);
71+
72+
// 兩者結果相同
73+
// 用 bind 會建立一個新函式，帶入 null 去忽略 this，false 變成 toggle 的第一個參數
74+
// stopButton.addEventListener('click', toggle.bind(null, false));
75+
stopButton.addEventListener('click', () => toggle(false));
4076
</script>
4177

4278
</body>
4379

44-
</html>
80+
</html>

Diff for: ‎24 - Sticky Nav/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day24-Sticky Nav
2+
實作一個常見固定在網頁上方的 nav bar

Diff for: ‎24 - Sticky Nav/index-Harry.html

+15-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>Sticky Nav</title>
7-
<link rel="stylesheet" href="style-START.css">
7+
<link rel="stylesheet" href="style-Harry.css">
88
</head>
99

1010
<body>
@@ -172,7 +172,20 @@ <h1>A story about getting lost.</h1>
172172
</div>
173173

174174
<script>
175-
175+
const main = document.querySelector('#main');
176+
let mainTop = main.offsetTop;
177+
178+
function fixNav() {
179+
if(window.scrollY >= mainTop) {
180+
document.body.classList.add('fixed-nav');
181+
document.body.paddingTop = `${main.offsetHeight}px`;
182+
} else {
183+
document.body.classList.remove('fixed-nav');
184+
document.body.paddingTop = 0;
185+
}
186+
}
187+
188+
window.addEventListener('scroll', fixNav);
176189
</script>
177190

178191
</body>

Diff for: ‎24 - Sticky Nav/style-Harry.css

+14-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ body {
1010
margin: 0;
1111
}
1212

13-
*,
14-
*:before,
15-
*:after {
13+
*, *:before, *:after {
1614
box-sizing: inherit;
1715
}
1816

@@ -27,6 +25,10 @@ body {
2725
transition: transform 0.5s;
2826
}
2927

28+
body.fixed-nav .site-wrap {
29+
transform: scale(1);
30+
}
31+
3032
header {
3133
text-align: center;
3234
height: 50vh;
@@ -52,6 +54,11 @@ nav {
5254
z-index: 1;
5355
}
5456

57+
body.fixed-nav nav {
58+
position: fixed;
59+
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);
60+
}
61+
5562
nav ul {
5663
margin: 0;
5764
padding: 0;
@@ -80,6 +87,10 @@ li.logo a {
8087
color: black;
8188
}
8289

90+
.fixed-nav li.logo {
91+
max-width: 500px;
92+
}
93+
8394
nav a {
8495
text-decoration: none;
8596
padding: 20px;

Diff for: ‎25 - Event Capture, Propagation, Bubbling and Once/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day25-Event Capture, Propagation, Bubbling and Once
2+
介紹事件傳遞: 事件冒泡和事件捕捉

0 commit comments

Comments
 (0)