JavaScript project – Recipe app 食譜資料庫

結果展示

將在網站中套用程式碼做測試

 

 

 

---

學習重點

• recipe info on click
• fav recipe (w/ localStorage)
• fetch API

---

Codepen程式碼資訊

HTML

See the Pen
Untitled by G-Dee (@G-Dee)
on CodePen.

---

CSS

See the Pen
Untitled by G-Dee (@G-Dee)
on CodePen.

---

JS

See the Pen
Untitled by G-Dee (@G-Dee)
on CodePen.

---

參考資料：

參考教學影片

UI設計

美食資料庫網站API

讓JSON看起來很清楚的擴充外掛 JSON formatter

Heroicons

CSS-gradient-background

JavaScript-fetch

async function

Video explain of AJAX

JavaScript -Array.map()

Array.push() video

Array.map() video

Array.join() video