JS30 days

這是什麼

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

• 筆記：
• Demo：https://codepen.io/4genie/full/bGLxrGm

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

Day30 Whack A Mole Game

• 筆記：https://justnote.coderbridge.io/2023/05/23/js30-day-30-notes/
• Demo：https://codepen.io/4genie/full/eYPQgGX