add day 26~30

a90100 · a90100 · commit 2e1234babff6 · 2020-03-29T21:02:00.000+08:00
diff --git a/24 - Sticky Nav/README.md b/24 - Sticky Nav/README.md
@@ -1,2 +1,2 @@
 # JS30-Day24-Sticky Nav
-實作一個常見固定在網頁上方的 nav bar
+實作一個常見固定在網頁上方的 nav bar
diff --git a/26 - Stripe Follow Along Nav/README.md b/26 - Stripe Follow Along Nav/README.md
@@ -0,0 +1,2 @@
+# JS30-Day25-Stripe Follow Along Dropdown
+一個滑鼠 hover 到超連結後會出現下拉選單的實作
diff --git a/26 - Stripe Follow Along Nav/index-Harry.html b/26 - Stripe Follow Along Nav/index-Harry.html
@@ -233,8 +233,43 @@ <h2>Cool</h2>
   </style>
 
   <script>
+    const triggers = document.querySelectorAll('.cool > li');
+    const background = document.querySelector('.dropdownBackground');
+    const nav = document.querySelector('.top');
+
+    function handleEnter() {
+      this.classList.add('trigger-enter');
+      // 有 trigger-enter class 才觸發後面的程式碼
+      setTimeout(() => { this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'); }, 150);
+      background.classList.add('open');
+
+      const dropdown = this.querySelector('.dropdown');
+      const dropdownCoords = dropdown.getBoundingClientRect();
+      // 為了減去 nav 元素上面的元素所佔的位置，所以也要取到 nav 的位置並減掉它
+      const navCoords = nav.getBoundingClientRect();
+
+      const coords = {
+        width: dropdownCoords.width,
+        height: dropdownCoords.height,
+        top: dropdownCoords.top - navCoords.top,
+        left: dropdownCoords.left - navCoords.left
+      }
+
+      background.style.setProperty('width', `${coords.width}px`);
+      background.style.setProperty('height', `${coords.height}px`);
+      // translate(x, y)
+      background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
+    }
+
+    function handleLeave() {
+      this.classList.remove('trigger-enter', 'trigger-enter-active');
+      background.classList.remove('open');
+    }
+
+    triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+    triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
   </script>
 
 </body>
 
-</html>
+</html>
diff --git a/27 - Click and Drag/README.md b/27 - Click and Drag/README.md
@@ -0,0 +1,9 @@
+# JS30-Day27-Click and Drag to Scroll
+一個滑鼠點擊網頁後可以左右拉動的實作
+
+## 重點整理
+### 1. e.scrollLeft
+代表元素左邊和橫軸滾動條的距離
+
+MDN 介紹:
+https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft
diff --git a/27 - Click and Drag/index-Harry.html b/27 - Click and Drag/index-Harry.html
@@ -37,8 +37,39 @@
   </div>
 
   <script>
+    const slider = document.querySelector('.items');
+    let isDown = false,
+      startX,
+      scrollLeft;
+
+    slider.addEventListener('mousedown', (e) => {
+      isDown = true;
+      slider.classList.add('active')
+      // 設定目前頁面距離
+      startX = e.clientX - slider.offsetLeft;;
+      // 設定卷軸左距
+      scrollLeft = slider.scrollLeft;
+    });
+
+    slider.addEventListener('mouseleave', () => {
+      isDown = false;
+      slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mouseup', () => {
+      isDown = false;
+      slider.classList.remove('active');
+    })
+
+    slider.addEventListener('mousemove', (e) => {
+      if(!isDown) return;
+      e.preventDefault();
+      const x = e.clientX;
+      const walkDistance = (x - startX) * 3;
+      slider.scrollLeft = scrollLeft - walkDistance;
+    })
   </script>
 
 </body>
 
-</html>
+</html>
diff --git a/28 - Video Speed Controller/README.md b/28 - Video Speed Controller/README.md
@@ -0,0 +1,2 @@
+# JS30-Day28-Video Speed Controller UI
+實作一個可以控制影片撥放速度的控制條
diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index-FINISHED.html
@@ -9,7 +9,6 @@
 
   <div class="wrapper">
     <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
-    <p>
     <div class="speed">
       <div class="speed-bar">1×</div>
     </div>
diff --git a/28 - Video Speed Controller/index-Harry.html b/28 - Video Speed Controller/index-Harry.html
@@ -1,24 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <title>Video Speed Scrubber</title>
   <link rel="stylesheet" href="style.css">
 </head>
-
 <body>
 
   <div class="wrapper">
-    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop
-      controls></video>
+    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
     <div class="speed">
       <div class="speed-bar">1×</div>
     </div>
   </div>
 
   <script>
+    const speed = document.querySelector('.speed');
+    const bar = speed.querySelector('.speed-bar');
+    const video = document.querySelector('.flex');
+
+    function handleMove(e) {
+      const percent = (e.clientY - this.offsetTop) / this.offsetHeight,
+            min = 0.5,
+            max = 4;
+            height = Math.floor(percent * 100) + '%';
+      let speed = percent * (max - min) + min;
+
+      bar.style.height = height;
+      bar.textContent = speed.toFixed(2) + 'x';
+      video.playbackRate = speed;
+    }
+
+    speed.addEventListener('mousemove', handleMove);
   </script>
 </body>
 
-</html>
+</html>
diff --git a/29 - Countdown Timer/README.md b/29 - Countdown Timer/README.md
@@ -0,0 +1,27 @@
+# JS30-Day29-Countdown Clock
+建立一個倒數計時器
+
+## 重點整理
+### 1. new Date() vs. Date.now()
+透過這個實作重新複習一次兩者取出的值
+
+`new Date()` 取出的是有星期幾，年月日幾點幾分幾秒的格式，而  `Date.now()` 取出的是從現在的時間到 1970 年 1 月 1 日開始的毫秒數值
+![](https://i.imgur.com/Yh6oBu3.png)
+
+`new Date()` 內也可以放置 timestamp，取得過去的時間
+![](https://i.imgur.com/8dvB5rZ.png)
+
+### 2. 可以使用屬性 name 來綁定監聽事件
+```html
+<form name="customForm" id="custom">
+    <input type="text" name="minutes" placeholder="Enter Minutes">
+</form>
+```
+
+這裡使用表單名字 customForm 綁定監聽事件
+```javascript
+document.customForm.addEventListener('submit', function(e) {
+  e.preventDefault();
+  // ...
+});
+```
diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html
@@ -24,6 +24,6 @@ <h1 class="display__time-left"></h1>
     </div>
   </div>
 
-  <script src="scripts-START.js"></script>
+  <script src="scripts-Harry.js"></script>
 </body>
 </html>
diff --git a/29 - Countdown Timer/scripts-Harry.js b/29 - Countdown Timer/scripts-Harry.js
@@ -0,0 +1,56 @@
+const timerDisplay = document.querySelector('.display__time-left'),
+  endTime = document.querySelector('.display__end-time'),
+  buttons = document.querySelectorAll('[data-time]');
+let countdown;
+
+// 倒數計時器主體
+function timer(seconds) {
+  clearInterval(countdown);
+  displayTimeLeft(seconds);
+
+  const now = Date.now(),
+    then = now + seconds * 1000;
+  displayEndTime(then);
+
+  countdown = setInterval(() => {
+    const secondsLeft = Math.round((then - Date.now()) / 1000);
+    if (secondsLeft < 0) {
+      clearInterval(countdown);
+      return;
+    }
+
+    displayTimeLeft(secondsLeft);
+  }, 1000);
+}
+
+// 呈現時間用
+function displayTimeLeft(seconds) {
+  const minutes = Math.floor(seconds / 60),
+    remainderSeconds = seconds % 60,
+    display = `${minutes} : ${remainderSeconds < 10 ? '0':''}${remainderSeconds}`;
+
+  document.title = display;
+  timerDisplay.textContent = display;
+}
+
+// 呈現結束時間
+function displayEndTime(timestamp) {
+  const end = new Date(timestamp),
+    hours = end.getHours() > 12 ? end.getHours() - 12 : end.getHours(),
+    minutes = end.getMinutes(),
+    display = `Be Back At ${hours} : ${minutes < 10 ? '0':''}${minutes}`;
+
+  endTime.textContent = display;
+}
+
+function startTimer() {
+  const seconds = parseInt(this.dataset.time);
+  timer(seconds);
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));
+document.customForm.addEventListener('submit', function (e) {
+  e.preventDefault();
+  timer(this.minutes.value * 60);
+  this.reset();
+})
diff --git a/30 - Whack A Mole/README.md b/30 - Whack A Mole/README.md
@@ -0,0 +1,9 @@
+# JS30-Day30-Whack A Mole Game
+最後一天!實作一個打地鼠的遊戲
+
+## 重點整理
+### 1. e.isTrusted()
+判斷事件是否由使用者操作而觸發，若是則為 true，若是由程式碼或是透過 `EventTarget.dispatchEvent()` 來觸發，則為 false
+
+MDN 介紹:
+https://developer.mozilla.org/zh-TW/docs/Web/API/Event/isTrusted
diff --git a/30 - Whack A Mole/index-Harry.html b/30 - Whack A Mole/index-Harry.html
@@ -38,7 +38,57 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
     const holes = document.querySelectorAll('.hole');
     const scoreBoard = document.querySelector('.score');
     const moles = document.querySelectorAll('.mole');
+    let lastHole,
+      timeUp = false,
+      score = 0;
+
+    // 地鼠出現在地面的時間
+    function randomTime(min, max) {
+      return Math.round(Math.random() * (max - min) + min);
+    }
+
+    // 隨機一個地鼠出現
+    function randomHole(holes) {
+      const id = Math.floor(Math.random() * holes.length),
+          hole = holes[id];
+
+      if(hole === lastHole) {
+        return randomHole(holes);
+      }
+      lastHole = hole;
+      return hole;
+    }
+
+    // 控制出現地鼠
+    function peep() {
+      const time = randomTime(200, 1000);
+      const hole = randomHole(holes);
+      hole.classList.add('up');
+      setTimeout(() => {
+        hole.classList.remove('up');
+        if(!timeUp) peep();
+      }, time);
+    }
+
+    // 開始遊戲
+    function startGame() {
+      scoreBoard.textContent = 0;
+      score = 0;
+      timeUp = false;
+      peep();
+      setTimeout(() => { timeUp = true }, 10000);
+    }
+
+    // 點到地鼠加分
+    function bonk(e) {
+      if(!e.isTrusted) return;
+      this.parentNode.classList.remove('up');
+      score++;
+      scoreBoard.textContent = score;
+    }
+
+    moles.forEach(mole => mole.addEventListener('click',bonk));
   </script>
 </body>
 
-</html>
+</html>
diff --git a/readme.md b/readme.md
@@ -29,14 +29,14 @@ https://github.com/wesbos/JavaScript30
 | 17 | Sort Without Articles | N/A | [DEMO](https://a90100.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/index-Harry.html) |
 | 18 | Adding Up Times with Reduce | N/A | [DEMO](https://a90100.github.io/JavaScript30/18%20-%20Adding%20Up%20Times%20with%20Reduce/index-Harry.html) |
 | 19 | Webcam Fun | [筆記](https://github.com/a90100/JavaScript30/tree/master/19%20-%20Webcam%20Fun) | [DEMO](https://a90100.github.io/JavaScript30/19%20-%20Webcam%20Fun/index.html) |
-| 20 | Speech Detection |  |  |
-| 21 | Geolocation |  |  |
-| 22 | Follow Along Link Highlighter |  |   |
-| 23 | Speech Synthesis |  |  |
-| 24 | Sticky Nav |  |  |
-| 25 | Event Capture, Propagation, Bubbling and Once |  |  |
-| 26 | Stripe Follow Along Nav |  |  |
-| 27 | Click and Drag |  |  |
-| 28 | Video Speed Controller |  |  |
-| 29 | Countdown Timer |  |  |
-| 30 | Whack A Mole  |  |  |
+| 20 | Speech Detection | [筆記](https://github.com/a90100/JavaScript30/tree/master/20%20-%20Speech%20Detection) | [DEMO](https://a90100.github.io/JavaScript30/20%20-%20Speech%20Detection/index-Harry.html) |
+| 21 | Geolocation | [筆記](https://github.com/a90100/JavaScript30/tree/master/21%20-%20Geolocation) | [DEMO](https://a90100.github.io/JavaScript30/21%20-%20Geolocation/index-Harry.html) |
+| 22 | Follow Along Link Highlighter | [筆記](https://github.com/a90100/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter) |  [DEMO](https://a90100.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter/index-Harry.html) |
+| 23 | Speech Synthesis | [筆記](https://github.com/a90100/JavaScript30/tree/master/23%20-%20Speech%20Synthesis) | [DEMO](https://a90100.github.io/JavaScript30/23%20-%20Speech%20Synthesis/index-Harry.html) |
+| 24 | Sticky Nav | N/A | [DEMO](https://a90100.github.io/JavaScript30/24%20-%20Sticky%20Nav/index-Harry.html) |
+| 25 | Event Capture, Propagation, Bubbling and Once | N/A | [DEMO](https://a90100.github.io/JavaScript30/25%20-%20Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once/index-Harry.html) |
+| 26 | Stripe Follow Along Nav | N/A | [DEMO]() |
+| 27 | Click and Drag | [筆記]() | [DEMO]() |
+| 28 | Video Speed Controller | N/A | [DEMO]() |
+| 29 | Countdown Timer | [筆記]() | [DEMO]() |
+| 30 | Whack A Mole  |  | [DEMO]() |

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`# JS30-Day24-Sticky Nav`
`2`		`-實作一個常見固定在網頁上方的 nav bar`
	`2`	`+實作一個常見固定在網頁上方的 nav bar`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# JS30-Day25-Stripe Follow Along Dropdown`
	`2`	`+一個滑鼠 hover 到超連結後會出現下拉選單的實作`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# JS30-Day28-Video Speed Controller UI`
	`2`	`+實作一個可以控制影片撥放速度的控制條`