這是什麼
Javascript30是一個 Wes Bos 的線上的教學課程,在 30 天內每天實作一個 JS 作品並講解相關概念。
教程 Github 位址:https://github.com/wesbos/JavaScript30
為什麼要做
加強自己對 Javascript 的熟悉度
以下筆記是從不同來源匯整出來,主要用於我自己個人學習,方便需要時快速復習。
歡迎讀者從每篇筆記中「參考資料」的連結了解更詳細的內容
Day01 JavaScript Drum Kit
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-1-notes/
- Demo:https://codepen.io/4genie/full/poaKdeB
Day02 CSS + JS Clock
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-2-notes/
- Demo:https://codepen.io/4genie/full/QWQxeQj
Day03 Playing with CSS Variables and JS
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-3-notes/
- Demo:https://codepen.io/4genie/full/QWQBEdV
Day04 Array Cardio Day1
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-4-notes/
- Demo:https://codepen.io/4genie/full/MWQBBrR
Day05 Flex Panels Image Gallery
Day06 Ajax Type Ahead
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-6-notes/
- Demo:https://codepen.io/4genie/full/yLvxWwP
Day07 Array Cardio Day2
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-7-notes/
- Demo:https://codepen.io/4genie/full/KKQGejm
Day08 Fun with HTML5 Canvas
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-8-notes/
- Demo:https://codepen.io/4genie/full/xxYQzqr
Day09 14 Must Know Dev Tools Tricks
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-9-notes/
- Demo:https://codepen.io/4genie/full/QWQJrvB
Day10 Hold Shift to Check Multiple
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-10-notes/
- Demo:https://codepen.io/4genie/full/BaYMNQP
Day11 Custom HTML5 Video Player
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-11-notes/
- Demo:https://codepen.io/4genie/full/dydLXOV
Day12 Key Sequence Detection (KONAMI CODE)
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-12-notes/
- Demo:https://codepen.io/4genie/full/eYVxrjb
Day13 Slide In on Scroll
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-13-notes/
- Demo:https://codepen.io/4genie/full/abqxGmY
Day14 Object and Arrays - Reference VS Copy
- 筆記:
- Demo:
Day15 Local Storage acd Event Delegation
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-15-notes/
- Demo:https://codepen.io/4genie/full/poaXBaj
Day16 CSS Text Shadow Mouse Move Effect
- 筆記:
- Demo:
Day17 Sorting Band Name without articles
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-17-notes/
- Demo:https://codepen.io/4genie/full/oNaYxYp
Day18 Tally String Times with Reduce
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-18-notes/
- Demo:https://codepen.io/4genie/full/jOeVQpL
Day19 Unreal Webcam Fun
- 筆記:
- Demo:
Day20 Native Speech Recognition
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-20-notes/
- Demo:https://codepen.io/4genie/full/VwEQpRz
Day21 Geolocation based Speedometer and Compass
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-21-notes/
- Demo:https://codepen.io/4genie/full/eYPKZPm
Day22 Follow Along Links
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-22-notes/
- Demo:https://codepen.io/4genie/full/WNayxLr
Day23 Speech Synthesis
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-23-notes/
- Demo:https://codepen.io/4genie/full/poxKNMz
Day24 Sticky Nav
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-24-notes/
- Demo:https://codepen.io/4genie/full/qBJMbbx
Day25 Event Capture, Propagation, Bubbling and Once
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-25-notes/
- Demo:https://codepen.io/4genie/full/bGmmGMm
Day26 Stripte Follow Along Dropdown
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-26-notes/
- Demo:https://codepen.io/4genie/full/gOBBbNY
Day27 Click and Drag to Scroll
- 筆記: https://justnote.coderbridge.io/2023/05/23/js30-day-27-notes/
- Demo:https://codepen.io/4genie/full/YzJJaqW
Day28 Video Speed Controller UI
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-28-notes/
- Demo:https://codepen.io/4genie/full/xxyyaBY
Day29 Countdown Clock
- 筆記:https://justnote.coderbridge.io/2023/05/23/js30-day-29-notes/
- Demo:https://codepen.io/4genie/full/zYmMvpg