C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，
但跟著課程內容寫程式碼，真的有學到嗎？
有，吧。
畢竟在寫最後的電影清單作業，遇到不少挫折，
在經過不斷反思，回頭翻筆記跟課程講解，
反而有種在失敗中成長的感覺。
電影清單畫面：
最煩惱的問題：收藏按鈕的樣式失效
一開始模式只要切換，或是使用搜尋功能，
已經加入收藏的電影，又會渲染成初始樣式，
而不是像圖片裡看到的，按鈕會變成紅色x。
直覺就是跟收藏功能相關的函式：
addToFavorite(id) {
const list = JSON.parse(localStorage.getItem('favoriteMovies')) || []
const movie = movies.find((movie) => movie.id === id)
if (list.some((movie) => movie.id === id)) {
return alert('此電影已加入收藏清單')
}
list.push(movie)
localStorage.setItem('favoriteMovies', JSON.stringify(list))
}
我看著這段程式碼，
想用 classList.add() 把樣式加上，
腦子卡了好幾個小時，卻百思不得其解，
不知道要怎麼抓 DOM 節點，
如果是在渲染畫面的時候，更改 innerHTML 呢？
於是我將目標轉向渲染畫面的函式，也許這裡有突破點：
renderMovieGallery(data) {
let rawHTML = ''
data.forEach((item) => {
rawHTML += `
...
<button class="btn btn-info btn-add-favorite" data-id="${item.id}">
+
</button>
...
`
}
})
dataPanel.innerHTML = rawHTML
}
如果是我會怎麼做？
如果我遇到類似情境會怎麼做？
假設我有一堆書要上架，有些有折扣、有些沒有，
而我的工作就是在上架前，把折扣貼紙貼在對的書上，
讓顧客一看就知道哪些有優惠活動。
那我會這麼做：
去查看工聯單寫著哪些書有折扣，一邊比對一邊貼上貼紙。
而在程式碼裡面，把收藏電影的資料放在 localStorage，
可以用來比對資料（工聯單），
要在渲染畫面前（上架前），先比對是不是收藏過（查看工聯單比對資料），
把樣式修改（貼上貼紙）後再渲染出來。
renderMovieGallery(data) {
let rawHTML = ''
const list = JSON.parse(localStorage.getItem('favoriteMovies')) || []
// 把要比對的資料抓出來 存在 list 中
data.forEach((item) => {
// 用迴圈比對 data 裡面的項目
if (list.some((movie) => movie.id === item.id)) {
// 如果在 data 的項目符合 list 裡的收藏
// 把按鈕渲染成已加入收藏的樣式
rawHTML += `
...
<button class="btn btn-danger btn-remove-favorite" data-id="${item.id}">
x
</button>
...
`
} else {
// 如果不符合 則渲染成初始樣式
rawHTML += `
...
<button class="btn btn-info btn-add-favorite" data-id="${item.id}">
+
</button>
...
`
}
})
dataPanel.innerHTML = rawHTML
}
回頭試跑網頁，按鈕可以正常使用，
不枉費我卡了一整個下午..
從 C1 一路上到了 C2，
知道要寫出漂亮 CSS 樣式的方法有很多種，
也知道做出 JavaScript 的功能有很多方法，
對我而言最困難的不是語法、物件與陣列或MVC 架構，
而是如何拆解問題。
換個角度思考，自己會怎麼做？
再把作法切成微小的步驟。
