鐵人檔案
題目簡介
學習程式其中一個很重要的點就是大量的實作和練習，知識要能運用才會產生力量，所以希望藉由這一系列的文章來增加輸出和練習量，也同時幫助自己理解各個知識點的實際應用。
內容規劃
此30篇主要會跟著Udemy上『50 Projects In 50 Days - HTML, CSS & JavaScript』的教學中挑出25-30個side project進行實作練習，使用技術會圍繞在HTML、 CSS 、JavaScript，搭配查找額外的資源來加強相關知識點，並把實做的步驟和過程記錄下來。
今天要做的是鍵盤代碼轉換器，隨著鍵盤的輸入值不一樣，會動態顯示它的code、key、keyCode這些資訊，相信大家可能在學javaScript的過程中也會用過...
今天要來做的賽project叫「爸爸的冷笑話」，需要對API有基本的認識，因為這篇要串接外部API來取得冷笑話集，並使用postman來進行測試，若要下載po...
今天要來做的主題還蠻有趣滴~ 如圖中所示，我們的目標水量是要把整個大杯子填滿(2L)，點選下方的小杯子(250ml)，可以把水加入大杯子中，並且顯示目前水量以...
今天要來做的是動態計數效果，隨著固定的時間遞增固定的數字上去，因為時間設得很短，所以視覺上看起來像是連續的，如圖中那樣! 事前準備 引入 fontAwes...
輪播圖的應用很常見也很廣泛，一般有框架就用框架，像是Bootstrap中的Carousel，不過這系列的文章主要著重在前端三大技術上，所以今天我們要來自己手刻...
今天我們要來做動態時鐘 ♪(^∇^*)，搭配上背景的黑白兩色切換，因篇幅較長(ㄟ看到這就不想看了)，會分成「上」、「下」兩篇來講解 功能拆解 時針每一小...
下篇我們要接續上篇的時鐘來講解主要圍繞在JS的部分 JS變數的設定 let hour = document.querySelector(".ho...
今天要來做的是滑鼠拖拉事件，點選笑臉圖片可以把它拖放到空的正方形中， 功能拆解 預設情況圖片會放在第一個正方形內 持續按著滑鼠左鍵，可以拖拉照片 抓起圖片經...
今天要來做的是垂直的輪播圖，點選「上」「下」箭頭可以反方向切換圖片和圖片的描述，做project順便看看帥哥好快樂≡ω≡ 事前準備 引入 fontAwes...
這篇沒有帥哥可以看，不過也是一個非常有趣的projecto(￣▽￣)ｄ 今天要做的是密碼生成器，根據使用者的需求去自動生成密碼，聽起來很厲害，另外考量到這篇的J...
