已經讓 AI Recipe 網站能夠根據食材顯示推薦料理。

不過，目前的結果只是簡單的文字。如果未來有更多食譜資訊，全部擠在一起就會不容易閱讀。

因此，今天要使用 HTML 和 CSS，將推薦結果設計成一張清楚的「食譜卡片」。

一、什麼是卡片式設計？

卡片式設計是將相關資訊放在同一個區域，讓使用者更容易閱讀。

例如一張食譜卡片可以包含：

• 料理名稱
• 所需食材
• 料理步驟
• 其他料理資訊

未來也可以在卡片中加入料理圖片或收藏按鈕。

二、讓 JavaScript 顯示卡片

接著，修改 Day 8 的 recommendRecipe() 函式。

找到成功找到食譜後，原本建立標題和步驟的部分，改成：

recipeResult.replaceChildren();
const card = document.createElement("div");
card.className = "recipe-card";
const title = document.createElement("h2");
title.textContent = recipe.name;
const tag = document.createElement("span");
tag.className = "tag";
tag.textContent = "推薦料理";
const steps = document.createElement("p");
steps.textContent = recipe.steps;
card.append(title, tag, steps);
recipeResult.appendChild(card);

這次使用 className 將 CSS 樣式套用到卡片上。

當找到符合條件的食譜時，JavaScript 就會建立卡片，再將料理名稱、標籤和步驟放進卡片中。

四、今天的成果

今天將原本單純的文字結果改成卡片式版面，讓推薦料理更容易閱讀。

這也讓網站開始有比較完整的產品樣貌，而不只是單純測試程式的畫面。

接下來，我會繼續補上料理時間、難度和類型等資訊，讓使用者能更快了解每份食譜的特色。