前幾天，我已經完成食材輸入、資料整理、食譜推薦和卡片式顯示。

不過，當使用者看到一份料理時，可能還會想知道：「這道菜要煮多久？會不會很難？屬於哪一種料理？」

因此，今天要替食譜加入更多資訊，讓推薦結果更完整。

一、擴充食譜資料

首先，回到 script.js，將原本的食譜資料擴充，加入料理時間、難度和料理類型。

const recipes = [
{
name: "番茄炒蛋",
ingredients: ["番茄", "雞蛋"],
steps: "將番茄切塊，炒熟雞蛋後加入番茄拌炒。",
time: 15,
difficulty: "簡單",
cuisine: "台式"
},
{
name: "蔥花煎蛋",
ingredients: ["雞蛋", "蔥"],
steps: "將雞蛋打散，加入蔥花，再放入鍋中煎熟。",
time: 10,
difficulty: "簡單",
cuisine: "家常"
},
{
name: "洋蔥炒蛋",
ingredients: ["雞蛋", "洋蔥"],
steps: "將洋蔥切絲炒軟，加入蛋液並炒至熟透。",
time: 15,
difficulty: "簡單",
cuisine: "家常"
}
];

現在，每份食譜除了名稱和料理步驟之外，還有三項額外資訊。

二、修改食譜卡片

接著，修改 Day 9 的 recommendRecipe() 函式，讓卡片顯示這些資訊。

找到成功取得 recipe 之後、建立卡片的程式碼，更新為：

recipeResult.replaceChildren();
const card = document.createElement("div");
card.className = "recipe-card";
const title = document.createElement("h2");
title.textContent = recipe.name;
const info = document.createElement("p");
info.textContent =
⏱️ ${recipe.time} 分鐘｜難度：${recipe.difficulty}｜類型：${recipe.cuisine};
const steps = document.createElement("p");
steps.textContent = recipe.steps;
card.append(title, info, steps);
recipeResult.appendChild(card);

這樣，當網站推薦「番茄炒蛋」時，除了料理名稱和步驟，也會顯示預估時間、料理難度和類型。

三、為什麼這些資訊很重要？

對使用者來說，推薦料理不只是知道「可以煮什麼」，還需要考慮實際情況。

例如：

• 如果只有 15 分鐘，就會希望找到快速完成的料理。
• 如果不太會煮飯，可能會優先選擇簡單的料理。
• 如果今天想吃特定風格的料理，類型資訊就能提供參考。

這些資訊也為後續的篩選功能打下基礎。

目前資料仍然是我預先設定的，因此顯示的料理時間和難度只是示範資料，實際烹調仍會受到食材處理方式、設備和個人經驗影響。

四、Day 4～Day 10 的階段成果

回顧這七天，我從最基本的 HTML 網頁開始，逐步加入 CSS、JavaScript、食材輸入和簡單的食譜推薦。

目前網站已經具備：

• 食材輸入與空白檢查
• 食材整理與畫面顯示
• 預設食譜資料比對
• 食譜卡片式呈現
• 料理時間、難度和類型資訊

當然，現在還不是完整的 AI 食譜推薦系統，因為推薦內容仍來自預先設定的資料。

接下來，我將開始研究 API 是什麼，以及如何讓網站與 AI 模型溝通，讓使用者輸入的食材有機會交由 AI 產生更有彈性的料理建議。

從只有標題和按鈕的網頁，到現在能顯示食譜，這個小專案終於慢慢有了雛形