# JS30 我要成為 JavaScript 大師

### 這是什麼
JS 30 呢，是使用原生的 JavaScript ( a.k.a 香草 JS, Vanilla JS ) 打照 30 個小作品。

會由 Benben, Six, Jason, 安潔, Didi, Raye 輪流分享，因為主要是 JavaScript 的部分，所以 HTML 跟 CSS 的部分可以不用著墨太多，如果覺得其中幾個有趣的玩意也歡迎隨喜分享囉 :grin:

### 為什麼要做
主要是希望大家 (~~變成 JS 大師~~) 可以練習之後面試的口條能力甚至白板題等等，另外，因為這是一個額外練習，還是希望大家課程憂先，所以 6 個人去 share 變成一個禮拜做一個的話，加上也附上了中文解說，應該是還可以吧XDD

### 如何做
Ref : https://javascript30.com/
中文解說 : https://ithelp.ithome.com.tw/users/20107334/ironman/1335 ( 鐵人邦偉哉 )
推薦平台 : https://codepen.io/your-work

### 時程
每個禮拜的 一、三、四、五、六 ( 二要看老師直播，日休息 ) 共 5 天，的晚上 21:00 在小樹屋的營幕共享室

---

### 06/30 (三) 21:00，Day01 Benben （12分鐘）
- 主題 : JavaScript Drum Kit ( 電子鼓 )
- 筆記 : [JS30 - Drum kit ( by Benben )](https://hackmd.io/YeMmUjUmSl-Yqf6dN9XhGA)
- Demo：https://codepen.io/benben6515/full/XWKrmzg
- 千千補充：[HTML 不推 keycode :(](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
### 07/01 (四) 21:00，Day02 Six （43分鐘）
- 主題 : CSS + JS Clock ( 時鐘 )
- 筆記 : [JS30 - JS and CSS Clock ( by Six ) ](https://hackmd.io/JjCz6HE_Sla6UTO7XdQBuQ?view)
- Demo : https://codepen.io/sixwings/pen/LYyVROz

### 07/02 (五) 21:00，Day03 Jason （15分鐘）
- 主題 : Playing with CSS Variables and JS
- 筆記 : [JS30 - Playing with CSS Variables and JS ( by Jason) ](https://hackmd.io/JY6jXBqqRT-VV3XhPH6YkA?both)
- Demo : https://codepen.io/jason-lin80826/pen/oNWXYYa
### 07/03 (六) 21:00，Day04 安潔 （22分鐘）
- 主題 : Array Cardio Day1
- 筆記 : [JS30 - Array Cardio Day ( by 安潔 )](https://hackmd.io/Z9rZgNC6RhKm0zubfHDiPg?view)
- Demo : https://codepen.io/angelinahsu/pen/YzVXMLe?editors=1010
### 07/05 (一) 21:00，Day05 Didi （22分鐘）
- 主題 : Flex Panels Image Gallery
- 筆記 : [JS30 - Flex Panels Image Gallery ( by Didi )](https://hackmd.io/@dadidi910/Sy03081au)
- Demo : https://codepen.io/dadidi910/pen/RwVWJGe
### 07/07 (三) 21:00，Day06 Raye （40分鐘）
- 主題 : Ajax Type Ahead
- 筆記 :[JS30 - Ajax Type Ahead ( by Raye )](https://hackmd.io/uqMoFG93Rr224PMcxNYbRw)
- Demo :https://codepen.io/raye0621/pen/ZEKWoqP

---

### 07/08 (四) 21:00，Day07 Benben （30分鐘）
- 主題 : Array Cardio Day2
- 筆記 : [JS30 - Array Cardio Day2 ( by Benben )](https://hackmd.io/5BjGYM3SSg-o7FTOKqUQsg?view)
- Demo : https://codepen.io/benben6515/pen/qBmbdLK
### 07/09 (五) 21:00，Day08 Six （45分鐘，傑森遲到 Bad 我很抱歉><）
- 主題 : Fun with HTML5 Canvas
- 筆記 : https://hackmd.io/@nP2xhGR8RAK3qlGb3RmF3A/r1iTUTraO
- Demo : https://codepen.io/sixwings/pen/WNjxmMv
### 07/10 (六) 21:00，Day09 Jason （19分鐘）
- 主題 : 14 Must Know Dev Tools Tricks
- 筆記 : https://hackmd.io/HlnpufX6Rn-vI-7BCwkiLQ
- Demo : https://codepen.io/jason-lin80826/pen/mdmrrvE
- 千千補充：[推推 console.table()](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)
- Six補充：[console 介紹](https://console.spec.whatwg.org/)
### 07/14 (三) 21:00，Day10 安潔 （15分鐘）
- 主題 : Hold Shift to Check Multiple Checkboxes
- 筆記 : [JS30 - Hold Shift to Check Multiple Checkboxes ( by 安潔 )](https://hackmd.io/mIBGH45WQhSTCwU0OjMSiQ)
- Demo : https://codepen.io/angelinahsu/pen/OJmRXxG
### 07/15 (四) 21:00，Day11 Didi （30分鐘）
- 主題 : Custom HTML5 Video Player
- 筆記 : [JS30 - Custom HTML5 Video Player ( by Didi )](https://hackmd.io/@dadidi910/r1tZbV2pu)
- Demo : https://codepen.io/dadidi910/pen/xxdgJZG
### 07/16 (五) 21:00，Day12 Raye （25分鐘）
- 主題 : Key Sequence Detection (KONAMI CODE)
- 筆記 : https://hackmd.io/7mhMEqn0TqOjCHGHPLzzuQ
- Demo : https://codepen.io/raye0621/pen/dyWWMgB
---
### 07/17 (六) 21:00，Day13 Benben （35分鐘）
- 主題 : Slide In on Scroll
- 筆記 : [JS30 - Day 13 ( by Benben )](https://hackmd.io/t5LFL4FYTCOzYK4CdMzCqw?view)
- Demo : https://codepen.io/benben6515/pen/ZEKeKer
### 07/19 (一) 21:00，Day14 Six （放送事故啦！！！！）
- 主題 : Object and Arrays - Reference VS Copy
- 筆記 : [JS30 - Day 14](https://hackmd.io/GyayQv_TSJeRkV-b6lNh8A?view)
- Demo : [demo](https://github.com/wesbos/JavaScript30/blob/master/14%20-%20JavaScript%20References%20VS%20Copying/index-FINISHED.html)
### 07/21 (三) 21:00，Day15 Jason （33分鐘）
- 主題 : Local Storage acd Event Delegation
- 筆記 : https://hackmd.io/79MLfaOSQLKoopICdhk66g
- Demo :https://codepen.io/jason-lin80826/pen/JjNJeRx
### 07/22 (四) 21:00，Day16 安潔 （21分鐘）
- 主題 : CSS Text Shadow Mouse Move Effect
- 筆記 : [JS30 - CSS Text Shadow Mouse Move Effect ( by 安潔 )](https://hackmd.io/QPM7T3t5TQmJIUBJAT4AqA?view)
- Demo : https://codepen.io/angelinahsu/pen/MWmvxmE?editors=0010
### 07/23 (五) 21:00，Day17 Didi （26分鐘）
- 主題 : Sorting Band Name without articles
- 筆記 : [JS30 - Sorting Band Name without articles（by Didi）](https://hackmd.io/@dadidi910/ryIh0LLC_)
- Demo : https://codepen.io/dadidi910/pen/abWLWKW
### 07/24 (六) 21:00，Day18 Raye （20分鐘）
- 主題 : Tally String Times with Reduce
- 筆記 : [Tally String Times with Reduce by Raye](https://hackmd.io/rSQv9v5DS5yfp-5xGyIu-Q?both)
- Demo : https://codepen.io/raye0621/pen/abWEjXE?editors=1111

---

### 07/26 (一) 21:00，Day19 Benben （25分鐘 盛世美顏）
- 主題 : Unreal Webcam Fun
- 筆記 : [JS30 - Day 19 ( by Benben )](https://hackmd.io/BxKkRqmkTIuysFrpujbsdw?view)
- Demo : https://codepen.io/benben6515/pen/bGWaajW
### 07/28 (三) 21:00，Day20 Six （60分鐘 老師壞掉）
- 主題 : Native Speech Recognition
- 筆記 :[JS30 - Day 20 by six](https://hackmd.io/@nP2xhGR8RAK3qlGb3RmF3A/BJJj6a0Cu)
- Demo : [gist](https://gist.github.com/outshaker/805363567cdda78c1be8d12e918c4858) 好像沒辦法在線上 demo 只能自己架 server QQ
- GitHub：https://github.com/wesbos/JavaScript30/tree/master/20%20-%20Speech%20Detection
### 07/29 (四) 21:00，Day21 安潔（12分鐘 救援傑森）
- 主題 : Geolocation based Speedometer and Compass
- 筆記 :[JS30 - Geolocation based Speedometer and Compass ( by 安潔 )](https://hackmd.io/@5ml3wcdXSVeBI80mBEu7ug/BJF7Z3JJK#/)
- Demo :https://codepen.io/angelinahsu/pen/YzVaade
### 07/30 (五) 21:00，Day22 Jason（18分鐘 live copying）
- 主題 : Follow Along Links
- 筆記 : https://hackmd.io/dNAvmRGlTyeblMvBV-YkVQ
- Demo : https://codepen.io/jason-lin80826/pen/KKmoLgv
### 07/31 (六) 21:00，Day23 Didi （27分鐘）
- 主題 : Speech Synthesis
- 筆記 : [JS30 - Speech Synthesis（by Didi）](https://hackmd.io/@dadidi910/rySluqWJY)
- Demo : https://codepen.io/dadidi910/pen/gOWzeYg
### 08/02 (一) 21:00，Day24 Raye （23分鐘 雷雷夥伴）
- 主題 : Sticky Nav
- 筆記 : [JS30 - Sticky Nav（by Raye）](https://hackmd.io/hFB_GpjyQiGKFxpsX2tY6A)
- Demo : https://codepen.io/raye0621/pen/ExmRRrd

---

### 08/04 (三) 21:00，Day25 Benben （27分鐘）
- 主題 : Event Capture, Propagation, Bubbling and Once
- 筆記 : [JS30 - Day 15 ( by Benben )](https://hackmd.io/@benben6515/Hyo526vJK)
- Demo : https://codepen.io/benben6515/pen/QWvVjwd
### 08/05 (四) 21:00，Day26 Six （45分鐘）
- 主題 : Stripte Follow Along Dropdown
- 筆記 : [JS30 - D26](https://hackmd.io/@nP2xhGR8RAK3qlGb3RmF3A/H1AWywFyK)
- Demo :https://codepen.io/sixwings/pen/zYwJVMM

### 08/06 (五) 21:00，Day27 Jason （18分鐘）
- 主題 : Click and Drag to Scroll
- 筆記 : https://hackmd.io/udvXQxYOS-qs2XRK5RDcxA
- Demo : https://codepen.io/jason-lin80826/pen/oNWaXze
### 08/07 (六) 21:00，Day28 安潔 （19分鐘）
- 主題 : Video Speed Controller UI
- 筆記 :[JS30 - Video Speed Controller UI ( by 安潔 )](https://hackmd.io/@5ml3wcdXSVeBI80mBEu7ug/Hk1x0YsyK#/)
- Demo :https://codepen.io/angelinahsu/pen/ZEKqgEo?editors=1010
### 08/09 (一) 21:00，Day29 Didi （50分鐘）
- 主題 : Countdown Clock
- 筆記 : [JS30 - Countdown Clock（by Didi）](https://hackmd.io/ffvblQBJRo2gvfkklUxFSA)
- Demo : https://codepen.io/dadidi910/pen/ZEKmLjX
### 08/11 (三) 21:00，Day30 Raye （40分鐘）
- 主題 : Whack A Mole Game
- 筆記 : https://hackmd.io/aemMozEpRSSotl5s90WfyA?view
- Demo - 程式碼：https://codepen.io/raye0621/pen/xxdMEmM
- Demo - 實作：http://rayes.tw/JS30/index-START.html

---