系列文章
Day6 Ajax Type Ahead
Day6 Ajax Type Ahead Demo 第六天的實作是練習Javascript非同步執行。 首先利用fetch物件建立接收資料的接口，fetch物件...
Day1 JS: Drum Kit
Day1 JS: Drum Kit Demo 第1天的實作是建立一個類似打鼓就產生音效的網頁，當點擊鍵盤時會讓網頁的element產生音效和動態的畫面效果。 首...
Day2 JS + CSS Clock
Day2 JS + CSS Clock Demo 在網頁畫面產生一個時鐘，能及時呈現目前的時間。 並且類似時鐘會有3個指針，每個指針會隨著時間的變化，有著相對應...
Day3 Playing with CSS Variables and JS
Day3 Playing with CSS Variables and JS Demo 在網頁產生三個控制元件<input type="rang...
Day4 Array Cardio Day 1
Day4 Array Cardio Day 1 Demo 這一個章節主要是利用Javascript的Array物件中方法做資料處理，在第四天會有幾個語法的練習...
Day5 Flex Panels Image Gallery
Day5 Flex Panels Image Gallery Demo 使用Css的flex來製作動態收縮展開的畫面。 在畫面會有五張圖<div>垂...
Day7 Array Cardio Day 2
Day7 Array Cardio Day 2 Demo 這一個章節跟第四天一樣主要是利用Javascript的Array物件中方法做資料處理。 第一個語法是...
Day8 Fun with HTML5 Canvas
Day8 Fun with HTML5 Canvas Demo 第8天的實作是網頁做出類似畫布，滑鼠在上方拖移會有顏色的產生，顏色會隨著滑鼠移動而變化，大小也是...
Day9 14 Must Know Dev Tools Tricks
Day9 14 Must Know Dev Tools Tricks Demo 第九天主要學習的是console的運用。 何為console？ 主要功能為：...
Day10 Hold Shift to Check Multiple Checkboxes
Day10 Hold Shift to Check Multiple Checkboxes Demo 第10天的實作目標是在列表中，當點選其中一個選項後，再按s...