今天是第十二天我們可以寫一個餐廳推薦網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>餐廳推薦管理系統</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>餐廳推薦管理系統</h1>
<!-- 餐廳表單 -->
<div class="form-container">
<h2>新增餐廳</h2>
<form id="restaurantForm">
<label for="name">餐廳名稱：</label>
<input type="text" id="name" required>
<label for="location">位置：</label>
<input type="text" id="location" required>
<label for="cuisine">菜系：</label>
<input type="text" id="cuisine" required>
<button type="submit">新增餐廳</button>
</form>
</div>
<!-- 餐廳列表 -->
<div class="list-container">
<h2>餐廳列表</h2>
<input type="text" id="search" placeholder="搜尋餐廳..." oninput="searchRestaurant()">
<ul id="restaurantList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.form-container, .list-container {
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
max-width: 600px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
label {
margin: 10px 0 5px;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin-top: 10px;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
#restaurantList {
list-style: none;
padding: 0;
}
#restaurantList li {
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
#restaurantList li button {
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 5px 10px;
}
#restaurantList li button:hover {
background-color: #c82333;
}
const restaurantForm = document.getElementById('restaurantForm');
const restaurantList = document.getElementById('restaurantList');
const searchInput = document.getElementById('search');
let restaurants = [];
// 新增餐廳事件監聽器
restaurantForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const location = document.getElementById('location').value;
const cuisine = document.getElementById('cuisine').value;
const newRestaurant = {
id: Date.now(),
name,
location,
cuisine
};
restaurants.push(newRestaurant);
displayRestaurants(restaurants);
restaurantForm.reset();
});
// 顯示餐廳列表
function displayRestaurants(restaurantArray) {
restaurantList.innerHTML = '';
restaurantArray.forEach(restaurant => {
const li = document.createElement('li');
li.innerHTML = `
${restaurant.name} - ${restaurant.location} - ${restaurant.cuisine}
<button onclick="deleteRestaurant(${restaurant.id})">刪除</button>
`;
restaurantList.appendChild(li);
});
}
// 刪除餐廳
function deleteRestaurant(id) {
restaurants = restaurants.filter(restaurant => restaurant.id !== id);
displayRestaurants(restaurants);
}
// 搜尋餐廳
function searchRestaurant() {
const searchTerm = searchInput.value.toLowerCase();
const filteredRestaurants = restaurants.filter(restaurant =>
restaurant.name.toLowerCase().includes(searchTerm) ||
restaurant.location.toLowerCase().includes(searchTerm) ||
restaurant.cuisine.toLowerCase().includes(searchTerm)
);
displayRestaurants(filteredRestaurants);
}
我會以javascript做主要程式碼解說
const restaurantForm = document.getElementById('restaurantForm');
const restaurantList = document.getElementById('restaurantList');
const searchInput = document.getElementById('search');
let restaurants = [];
restaurantForm：取得HTML中的表單元素，用來新增餐廳資料。restaurantList：取得餐廳列表的<ul>元素，用來顯示所有新增的餐廳。searchInput：取得搜尋框的輸入元素，用來進行搜尋操作。restaurants：宣告一個空陣列，儲存餐廳的資料，新增的餐廳會以物件形式儲存在這個陣列中。restaurantForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const location = document.getElementById('location').value;
const cuisine = document.getElementById('cuisine').value;
const newRestaurant = {
id: Date.now(),
name,
location,
cuisine
};
restaurants.push(newRestaurant);
displayRestaurants(restaurants);
restaurantForm.reset();
});
restaurantForm.addEventListener('submit', function (e) {...})：這是一個事件監聽器，當使用者提交表單時觸發。submit是監聽表單提交的事件。e.preventDefault()：阻止表單的預設提交行為，因為我們不想重新加載頁面，而是動態處理新增餐廳。name, location, cuisine：這些變數分別取得使用者輸入的餐廳名稱、位置和菜系。newRestaurant：建立一個新物件，使用Date.now()生成唯一的id，並且將餐廳的名稱、位置、菜系一起存入物件中。restaurants.push(newRestaurant)：將新建的餐廳物件添加到restaurants陣列中。displayRestaurants(restaurants)：呼叫displayRestaurants()函數，更新並顯示最新的餐廳列表。restaurantForm.reset()：重置表單內容，清空輸入欄位。function displayRestaurants(restaurantArray) {
restaurantList.innerHTML = '';
restaurantArray.forEach(restaurant => {
const li = document.createElement('li');
li.innerHTML = `
${restaurant.name} - ${restaurant.location} - ${restaurant.cuisine}
<button onclick="deleteRestaurant(${restaurant.id})">刪除</button>
`;
restaurantList.appendChild(li);
});
}
restaurantList.innerHTML = '';：首先清空餐廳列表，以便重新更新所有項目。restaurantArray.forEach(restaurant => {...})：用forEach迴圈遍歷restaurantArray（即目前所有餐廳的陣列）。const li = document.createElement('li');：動態建立一個<li>元素，這是一個餐廳項目。li.innerHTML = ...：將餐廳名稱、位置、菜系和刪除按鈕放入<li>中。按鈕的onclick屬性會調用deleteRestaurant()函數來刪除餐廳。restaurantList.appendChild(li)：將這個<li>項目添加到餐廳列表的<ul>中。function deleteRestaurant(id) {
restaurants = restaurants.filter(restaurant => restaurant.id !== id);
displayRestaurants(restaurants);
}
deleteRestaurant(id)：這個函數根據傳入的id來刪除指定的餐廳。restaurants.filter(...)：使用filter方法來返回一個不包含指定id的餐廳的新陣列，這會刪除匹配id的餐廳。displayRestaurants(restaurants)：重新顯示餐廳列表，因為餐廳陣列已經更新。function searchRestaurant() {
const searchTerm = searchInput.value.toLowerCase();
const filteredRestaurants = restaurants.filter(restaurant =>
restaurant.name.toLowerCase().includes(searchTerm) ||
restaurant.location.toLowerCase().includes(searchTerm) ||
restaurant.cuisine.toLowerCase().includes(searchTerm)
);
displayRestaurants(filteredRestaurants);
}
searchInput.value.toLowerCase()：取得使用者在搜尋框中輸入的文字，並將其轉換為小寫，確保搜尋不區分大小寫。restaurants.filter(...)：filter方法根據搜尋條件過濾餐廳。檢查餐廳名稱、位置或菜系是否包含搜尋字串。displayRestaurants(filteredRestaurants)：顯示符合搜尋條件的餐廳。
iThome鐵人賽
看影片追技術