JS30 我要成為 JavaScript 大師

這是什麼

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

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

為什麼要做

主要是希望大家 (變成 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 )
• Demo：https://codepen.io/benben6515/full/XWKrmzg
• 千千補充：HTML 不推 keycode :(

07/01 (四) 21:00，Day02 Six （43分鐘）

• 主題 : CSS + JS Clock ( 時鐘 )
• 筆記 : JS30 - JS and CSS Clock ( by Six )
• 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)
• Demo : https://codepen.io/jason-lin80826/pen/oNWXYYa

07/03 (六) 21:00，Day04 安潔 （22分鐘）

• 主題 : Array Cardio Day1
• 筆記 : JS30 - Array Cardio Day ( by 安潔 )
• 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 )
• Demo : https://codepen.io/dadidi910/pen/RwVWJGe

07/07 (三) 21:00，Day06 Raye （40分鐘）

• 主題 : Ajax Type Ahead
• 筆記 :JS30 - Ajax Type Ahead ( by Raye )
• Demo :https://codepen.io/raye0621/pen/ZEKWoqP

---

07/08 (四) 21:00，Day07 Benben （30分鐘）

• 主題 : Array Cardio Day2
• 筆記 : JS30 - Array Cardio Day2 ( by Benben )
• 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()
• Six補充：console 介紹

07/14 (三) 21:00，Day10 安潔 （15分鐘）

• 主題 : Hold Shift to Check Multiple Checkboxes
• 筆記 : JS30 - Hold Shift to Check Multiple Checkboxes ( by 安潔 )
• 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 )
• 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 )
• Demo : https://codepen.io/benben6515/pen/ZEKeKer

07/19 (一) 21:00，Day14 Six （放送事故啦！！！！）

• 主題 : Object and Arrays - Reference VS Copy
• 筆記 : JS30 - Day 14
• Demo : demo

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 安潔 )
• 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）
• 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
• Demo : https://codepen.io/raye0621/pen/abWEjXE?editors=1111

---

07/26 (一) 21:00，Day19 Benben （25分鐘 盛世美顏）

• 主題 : Unreal Webcam Fun
• 筆記 : JS30 - Day 19 ( by Benben )
• Demo : https://codepen.io/benben6515/pen/bGWaajW

07/28 (三) 21:00，Day20 Six （60分鐘 老師壞掉）

• 主題 : Native Speech Recognition
• 筆記 :JS30 - Day 20 by six
• Demo : gist 好像沒辦法在線上 demo 只能自己架 server QQ
• GitHub：https://github.com/wesbos/JavaScript30/tree/master/20 - Speech Detection

07/29 (四) 21:00，Day21 安潔（12分鐘 救援傑森）

• 主題 : Geolocation based Speedometer and Compass
• 筆記 :JS30 - Geolocation based Speedometer and Compass ( by 安潔 )
• 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）
• Demo : https://codepen.io/dadidi910/pen/gOWzeYg

08/02 (一) 21:00，Day24 Raye （23分鐘 雷雷夥伴）

• 主題 : Sticky Nav
• 筆記 : JS30 - Sticky Nav（by Raye）
• 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 )
• Demo : https://codepen.io/benben6515/pen/QWvVjwd

08/05 (四) 21:00，Day26 Six （45分鐘）

• 主題 : Stripte Follow Along Dropdown
• 筆記 : JS30 - D26
• 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 安潔 )
• Demo :https://codepen.io/angelinahsu/pen/ZEKqgEo?editors=1010

08/09 (一) 21:00，Day29 Didi （50分鐘）

• 主題 : Countdown Clock
• 筆記 : JS30 - Countdown Clock（by Didi）
• 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

---