這段要貼在哪裡:先在自己的工作資料夾建立同名相對位置,再複製內容。
const services = [
{ name: "到府諮詢", price: 1200, featured: true },
{ name: "定期維護", price: 800, featured: false },
{ name: "安心檢查", price: 600, featured: true },
];
const names = services.map((service) => service.name);
const featuredServices = []; // CHECKPOINT-1:用 filter 與 featured === true 產生推薦清單。
const originalServices = JSON.stringify(services);
const status = document.querySelector("#status");
const renderButton = document.querySelector("#render");
const resetButton = document.querySelector("#reset");
const serviceList = document.querySelector("#service-list");
const featuredList = document.querySelector("#featured-list");
function renderList(list, items) {
list.replaceChildren();
items.forEach((service) => {
const item = document.createElement("li");
item.textContent = service.name + "|NT$ " + service.price;
list.append(item);
});
}
function renderResult() {
renderList(serviceList, services);
renderList(featuredList, featuredServices);
status.textContent = "共 " + services.length + " 項服務,推薦 " + featuredServices.length + " 項";
const unchanged = JSON.stringify(services) === originalServices;
console.log({ services, names, featuredServices, unchanged });
}
function resetResult() {
serviceList.replaceChildren();
featuredList.replaceChildren();
status.textContent = "尚未整理";
}
renderButton.addEventListener("click", renderResult);
resetButton.addEventListener("click", resetResult);