鐵人檔案
緣起 身為一個懵懵懂懂的菜逼八前端，從轉職到現在也快一年的時間．似乎對工作上的流程有熟悉了？但因為公司的專案，基本上都有前輩類似的功能可以參考．不知不覺在寫co...
JavaScript Drum Kit 今天是一個簡單的鍵盤監聽事件，當按到對應的鍵盤時，會有css的變化，和聲音播放．原本影片是放入爵士鼓的聲音，但我個人後來...
CSS + JS 時鐘 先附上最終成品圖以及個人codepen 利用JS去取得現在的時間，再去操控ＣＳＳ的變化，一開始覺得不太熟悉的是CSS的屬性該怎麼使用Ｘ...
CSS variables with JS 今天是css變數的應用方式，成品如下方： 以及個人codepen css本身可以像sass、scss一樣有變數功能，...
Array Cardio 今天是單純的js練習，以及題目截圖 以及個人codepen 技巧點 以下為基礎的陣列方法操作運用 1. filter() const...
Flex Pannels Image Gallery 當使用者點擊任何一張圖片的時候，此圖片就會變水平展開，可以看到比較完整的圖片全貌．同時會出現此圖片的相關敘...
Ajax Type Ahead 從固定的json檔案中得到資料，將它渲染在畫面中．並且結合搜尋的功能，讓使用者搜尋關鍵字，找到符合條件的資料．以上是這次的練習介...
Array Cardio陣列方法 這次的練習，只有js的陣列方法，所以沒有成品的截圖>< 附上個人codepen 技巧點 1. some() 在陣...
Fun with HTML5 Canvas趣味畫布 先附上練習的成品．有點像小畫家的畫布一樣，但畫筆顏色、粗細、線條要讓使用者控制的話，就要另外寫js去處理囉～...
Must know dev tools tricks開發者工具 這單元好喜歡，不用寫js也不用html、css，單純認識一下開發者工具中的各種console 直...
