鐵人檔案
這個系列將以我喜歡的歌手為主題，透過 HTML、CSS、JavaScript 與 jQuery 等技術，製作一個專屬的歌手介紹網頁。內容將涵蓋：歌手基本資訊、專輯與歌曲列表、隨機播放歌曲、互動式元素，以及簡單的前端美化與動畫效果。
同時，在實作的過程中，我會每天記錄學到的知識點、遇到的問題與解決方式，並整理成技術分享文章，讓讀者不僅能看到成果，也能學習網頁開發的基礎與實務技巧。
目標 1.在 lyrics.js 中，填寫專輯每首歌的歌詞資料2.確保從專輯列表點擊 Lyrics 按鈕可以顯示對應歌詞3.從單曲展示區點及歌曲後顯示正確的歌詞...
目標 1.在歌詞頁面顯示 歌名、歌詞2.若有 YouTube 連結，顯示播放按鈕 javascript // YouTube 連結資料 const y...
目標 在每張專輯頁面新增「隨機播放一首」按鈕，使用戶可以隨機點擊播放專輯內的任意一首歌曲。目前專輯頁面已經能夠顯示專輯資訊、專輯封面、以及歌曲列表。今天的目標是...
在前幾天，我已經完成了「隨機播放」和「歌詞顯示」等核心功能。不過在音樂平台上，單純能聽歌還不夠，使用者常常會希望把自己喜歡的歌曲標記起來，以便之後能快速找到。因...
昨天我已經成功新增了「喜愛（愛心）」按鈕，點擊之後愛心會從空心 ♡ 變成實心 ♥，再點一次又會切回空心。這樣的互動效果已經不錯了，但仍然有一個問題：只要跳出頁面...
昨天我實作了「愛心收藏功能」並且透過 localStorage 讓紀錄不會消失。今天，我要再介紹 localStorage 與 sessionStorage，這...
昨天聊到 LocalStorage / SessionStorage，今天回到前端設計，想分享一下我在專案裡 美化首頁 About Keshi 區塊 的過程。之...
今天在歌詞頁面，我進行了一個小細節的調整：原本歌詞頁面上方的 YouTube 連結是用YouTube圖片來呈現，但我想讓它更統一、簡潔，也方便調整大小和效果，所...
今天要完成的目標是：把自己的網頁架設到 GitHub Pages，讓任何人都能透過網址看到我的作品。這對於日後展示專案、作品集或作業都非常方便。 為什麼要用...
