編寫一個歌詞選單頁面的步驟, 及大部分編寫的流程.
Step 1. 分析問題:
Adele 的「25」是一張膾炙人口的專輯，出於個人喜好，你想幫這張專輯做一個歌詞網站。
當你點擊左欄的歌曲名稱時，就會發送請求給 lyrics.ovh，並且將回傳的歌曲顯示在右欄：
Step 2. 拆解問題：
- 左欄的曲目由 album 物件動態產生
- 右欄的歌詞內容需來自 lyrics.ovh 提供的 API，並使用 axios 發送請求
step 3. 尋找答案及方法：
根據step2的兩個問題去想想可能會遇到的問題及提出建議方式
<< 如果可以讓＿who＿,使用上能＿＿＿＿效果. 參考使用＿＿＿方式 >>
- 如果要讓使用者在使用介面上能選擇按鈕簡潔清楚, 參考 Bootstrap 的使用方式```pill
- 如果要讓使用者看到歌詞能更清楚, 可以讓歌詞有換行的效果，參考使用
<pre></pre>標籤 - 如果…要右側欄位創造清單曲目 , 參考運用Array x Object 製作ＤＯＭ元素插入HTML.
- 如果要讓右側欄位的清單曲目可以點擊列出歌曲, 可以設計驅動流程addeventlisten , 發送ajax GET 取得ＡＰＩ資料
- 如果要讓歌曲呈現在完整出現在左側, 運用取得的ＡＰＩ資料陣列結構,並選出要的資料修改DOM元素
Step 4. 做出自己的編寫流程
將step3的方法做一個流程工作
前置框架：
- 繪製區塊＆html 標籤
- FIGMA做群組, 及HTML架構.
- 編寫main.js , 將區塊做註解及定義
分類要做的不同工作項目＿Javascript __當中會隨者處理狀況不同調整順序
- 處理 Array x Object 來創造曲目清單的 DOM 元素
- 設計事件驅動流程，在適當時機發送 Ajax 請求取得 API 資料
- 取得 API response 之後，觀察 Array x Object 的資料結構，選出需要的資料來修改 DOM 元素
繪製區塊＆html 標籤
建議可以先做手稿. 比較容易知道後續怎麼編區塊
左邊有做群組, 可以很清楚知道HTML架構.
編寫main.js , 將區塊做註解及定義
善用const 及 DOM , 讓後面工作事半功倍.
給const 做註解. 能更直覺化. 回頭去確認「變數的內容」可以更快.
分類要做的不同工作項目＿Javascript ：
條件做好可以先不需要輸入條件及函數 , 建議註記工作內容
當三個工作項目都先佈好, 輸入函數及迴圈條件
過程中可以透過開啟html 查看進度
發現一個未定義. GO Fixed!!!
或少打一些字 , 從中調整.
調整順序或調整更好的內容：
將原本是innerHTML += 插入 <button></button>
改為 <a data-toggle=’pill’ href=’#’
左邊側欄位, 成功插入：陣列
- 處理 Array x Object 來創造曲目清單的 DOM 元素
和起出的圖稿是一樣, OK
將功能做好的區塊顏色取消：
將將將！！水歐
剩下右側的歌詞
- 設計事件驅動流程，在適當時機發送 Ajax 請求取得 API 資料
- 取得 API response 之後，觀察 Array x Object 的資料結構，選出需要的資料來修改 DOM 元素
如果___編輯時邏輯沒有錯誤, 點擊動作後才出現…錯誤
表示是在拿檔案之後 才跳出ＥＲＲＯＲ . 通常是axios 以下有問題
查看network 及 console.
GET 失敗 . Fixed => _(一定是在axios 以下的地方出問題 )
通常是GET 路徑錯誤 ,,或 .then(Response)=> 插入的html資料結構錯誤.
完成一個歌詞ＡＰＩ：
取消顏色區塊：
第一招： 陣列 i++改為 forEach
如果要讓編碼更簡潔 ：
可以將清單的
(let i =1 ; i< album.tracks.length ; <i++) { .........} 這是新手寫法後面的參數都要填 album.track[i]
進階可以改成：
album.tracks forEach( ( track)=> { XXXXXXXXX }後面的參數只要 track
Before
After : simple
