# 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 ---
Last changed by  
 
Benben
5027

Read more

嘸蝦米加強字

老殘卑鄙風景挽留醫生酬勞寂寞先生政府衛星發展鄰近競爭陽光格調蘆洲雙飛猶豫作業聯絡業障

4/20/2024
10/04 （三） 回后綜娘家

好好學英文，還有數學

10/4/2023
reading-list

last updated: 2023/04/29

10/1/2023
fe-resources

前端資源整理 ！小提醒：請不要拿這篇個人筆記去拆別人的招牌，如：X 角學院、X camp 的課怎麼賣這麼貴之類的。台灣的資源也有他好的地方，這邊推薦的內容也很主觀，但有讓你多一個參考或是有幫助到你就足夠了。 TL;DR （前言） 安安，你好！我是 Benben 如果你趕時間，可以直接看下面的 總結 (aka 懶人包) 主要還是依個人需求去選擇資源，我這邊推的資源 我都有買、也做了不少研究，就推薦一下我覺得 CP 值最高 的課吧！

5/24/2023
Read more from Benben
Published on HackMD