在前幾天，我已經完成了「隨機播放」和「歌詞顯示」等核心功能。不過在音樂平台上，單純能聽歌還不夠，使用者常常會希望把自己喜歡的歌曲標記起來，以便之後能快速找到。因此今天的目標就是新增一個**「愛心收藏按鈕」**，讓每首歌旁邊都能顯示一顆愛心，點擊之後可以標記為喜歡的歌曲。

功能設計

1. 每一首歌曲旁邊新增一個愛心按鈕。
2. 點擊愛心時，會變成 實心愛心 (💖)，代表已收藏。
3. 再次點擊會恢復成 空心愛心 (❤️)，代表取消收藏。
4. 暫時先做成「前端互動」，後續可以延伸成用 localStorage 保存狀態。

JavaScript

在歌曲列表的區塊，為每首歌加上一個「愛心」：

li.innerHTML = `
                <div class="song-item">
                    <span>${index + 1}. <a href="${song.url}" target="_blank">${song.name}</a></span>
                    <div class="action-btns">
                        <a href="lyrics.html?song=${album.title}-${song.name}" class="lyrics-btn">lyrics</a>
                        <button class="like-btn">♡</button>
                    </div>
                </div>
            `;

說明:

• song-item 是整個一行歌曲的容器。
• action-btns 包含 Lyrics 按鈕 和 愛心按鈕。
• 愛心按鈕初始文字是 ♡（空心愛心）。

// 監聽所有喜愛按鈕
    document.querySelectorAll(".like-btn").forEach(btn => {
        btn.addEventListener("click", () => {
            if (btn.textContent === "♡") {
                btn.textContent = "♥"; // 點擊後變實心
                btn.classList.add("liked");
            } else {
                btn.textContent = "♡"; // 再點一次變空心
                btn.classList.remove("liked");
            }
        });
    });

說明:

• 選取所有 .like-btn。
• 點擊後，如果目前是空心，就變成實心，並加上 .liked class（紅色、動畫效果）。
• 再點一次，恢復空心，移除 .liked class。

CSS

.song-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右分散：歌名在左，按鈕在右 */
}


.song-item .action-btns {
    display: flex;
    gap: 8px; /* 控制 lyrics 和愛心的間距 */
}
/* 喜歡按鈕樣式 */
.like-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  color: gray;
  transition: transform 0.2s ease, color 0.2s ease;
}


.like-btn:hover {
  transform: scale(1.2);
}


.like-btn.liked {
  color: rgb(206, 30, 30);
}

說明:

• justify-content: space-between 讓歌名靠左，按鈕群靠右。
• gap: 8px 控制 Lyrics 與愛心按鈕之間的距離。
• transition 加了動畫效果：點擊或 hover 愛心時會有放大感。

畫面展示