JS30 我要成為 JavaScript 大師

# 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 ---