鐵人檔案
之前一直想嘗試看看 JavaScript30，但在開始前就踏入 React 的世界。
這次決定藉由鐵人賽來用 React 玩 JavaScript30，雖然不知道用框架實作是否很多餘，不過就當作是給自己這 30 天的挑戰，也是個將過程分享出來的機會，就請多多指教惹！
Day01 是實作用鍵盤模擬打鼓的題目，當使用者按下對應的按鍵，就會播放對應的鼓聲，以下就讓我們來製作 React 的版本ㄅ （之後每天的示範樣式都會使用 Ta...
Day02 要做的是虛擬時鐘，就讓我們直接開始ㄅ 時間資料 先用 useState 建立目前的時間 const [time, setTime] = useS...
Day03 是用 CSS 變數來更改圖片的樣式，可以做出簡單的圖片編輯器，但我剛開始的寫法似乎沒有符合原作的精神（？ 後來問了 AI 後，發現還是可以從 CSS...
沒想到 Day04 是單純的 JS 題目，主要聚焦在 JavaScript 陣列方法的使用，但我最後還是有寫在 CodeSandBox 裡面惹，就開始ㄅ Q1...
Day05 是利用 CSS 的 flex 特性來完成伸縮畫廊，做出有互動效果的圖片展示面板 建立資料 之後會用這些資料來展示圖片需要的資訊 const i...
Day06 要做的是動態搜尋功能，是個可以偵測使用者輸入字串的篩選器 建立資料 資料可以由 fetch 遠端取得 searchQuery 用來儲存搜尋字...
今天跑去聽演唱會，完全忘記要來發文，太慘惹，我好蠢ＱＱ要能時時刻刻記得自己有在進行鐵人賽的參賽者們真的很不簡單明年真的要確實提早準備，還要記得每天訂鬧鐘提醒自...
Day08 是要利用 HTML5 Canvas 來做出畫布 資料狀態 canvasRef, ctxRef 用來取得顯示的內容 isDrawing 判斷是...
Day09 主要在介紹各種 console 的用法 基本用法 console.log("Hello") 穿插字串 console.log(...
Day10 是要實作可以用 Shift 來多選框框的題目 建立資料 const checkboxData: string[] = [ "This...
