Javascript30 是一個線上的教學課程， 不使用 framework 和 library，直接純 JS 做出三十個小東西。
不過我不太確定教學用到 ES6 算不算純 JS，考慮到現在瀏覽器可以直接執行 ES6，就當作是吧， 因為符合「不使用 framework 和 library」的定義嘛。 因此我也忍不住跟著用了，不然會有點痛苦XD
看很多人都有做筆記並弄成 GitHub Pages，我也如法炮製，來更加享受這個過程。
如果有的話，我會在每篇 readme 裡記錄一些跟教學不同的作法，若大家發現這些邪門歪道會有 bug 的話也請不吝指教。
我看了前兩個影片後打算先自己觀察完成版並實作功能，初學者請不要輕易嘗試這種做法。由於已經提供影片和解答的關係， 一開始就沒在跟你客氣的，不知道怎麼查 transition 或要用哪個 event 的話就沒辦法開始。套句名言：
這雖然是教學，但可不是鬧著玩的。
話說回來，光是研究這裡怎麼使用 css 就很猛了。
- 01 - JavaScript Drum Kit
- 02 - JS and CSS Clock
- 03 - CSS Variables
- 04 - Array Cardio Day 1
- 05 - Flex Panel Gallery
- 06 - Type Ahead
- 07 - Array Cardio Day 2
- 08 - Fun with HTML5 Canvas
- 09 - Dev Tools Domination
- 10 - Hold Shift and Check Checkboxes
- 11 - Custom Video Player
- 12 - Key Sequence Detection
- 13 - Slide in on Scroll
- 14 - JavaScript References VS Copying
- 15 - LocalStorage
- 16 - Mouse Move Shadow
- 17 - Sort Without Articles
- 18 - Adding Up Times with Reduce
- 19 - Webcam Fun
- 20 - Speech Detection
- 21 - Geolocation
- 22 - Follow Along Link Highlighter
- 23 - Speech Synthesis
- 24 - Sticky Nav
- 25 - Event Capture, Propagation, Bubbling and Once
- 26 - Stripe Follow Along Nav
- 27 - Click and Drag
- 28 - Video Speed Controller
- 29 - Countdown Timer
- 30 - Whack A Mole
以下是原本的 readme
Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
Grab the course at https://JavaScript30.com
Feel free to submit a PR adding a link to your own recaps, guides or reviews!
- Arjun Khode’s blog about summaries for each day, including fixed glitches, bugs and extra features
- Nitish Dayal's Text Guides are great for those who like reading over watching
- Meredith Underell's Quick Lessons Learned
- Rowan Weismiller's Recaps + Lessons Learned
- Thorsten Frommen shares how he solved the exercises before viewing the answers
- Soyaine 写的中文指南包含了过程记录和难点解释
- Ayo Isaiah's Recaps and Lessons Learned
- Adriana Rios shares her alternative solutions
- Michael Einsohn publishes each challenge after watching the video once
- Mike Ekkel
- Akinjide Bankole used Node.js with Jade to solve the exercises
- Yusef Habib lessons and tricks learned, and a gh-page to see working all the mini-projects.
- Amelie Yeh 30 lessons notes with things I've learned, and those important recaps. and directly view my demos here 🇹🇼😄
- Winar的JavaScript30天挑战，记录练习过程，重难点和其他的解决方案。🎨
- Rayhatron - walkthroughs, recaps and lessons learned.
- Andrei Dobra Full repo with lessons learned and a gh-page with all the exercises.
- 从零到壹全栈部落,春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。
- Usmaan Ali's summary of the technical skills learned from each project. He's also posting them as separate blog posts here
- Axel's lessons learned and a showcase with the projects.
- Chris 中文實戰，目標描述、過程紀錄。
- Muhammad D. Ramadhan's blog. He shamlesly mixed his personal life with 30 day JavaScript challenge so as to increase his learning retention. He also summarised the challenge on one single page. Do not read his blog!
- Lee Keitel's Blog includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
- Dustin Hsiao 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及gh-page。
These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
The starter files + solutions will be updated if/when the videos are updated.
Thanks!