# 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 ---
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up