Cách tạo một cuốn sách công thức bằng HTML, CSS và JavaScript
Dự án này sẽ giúp bạn trau dồi kỹ năng giao diện người dùng và hướng dẫn bạn cách xây dựng giao diện bằng các tiêu chuẩn web cốt lõi.
Dự án là một cách tuyệt vời để cải thiện các kỹ năng HTML, CSS và JavaScript của bạn, đồng thời củng cố các khái niệm và kỹ thuật quan trọng.
Một dự án mà bạn có thể bắt đầu là một cuốn sách công thức mà bạn có thể chạy trên trình duyệt như Google Chrome hoặc Firefox.
Trong sách công thức, phía bên trái của trang web bao gồm một phần nơi người dùng có thể thêm công thức mới. Ở bên phải của trang, người dùng có thể xem và tìm kiếm các công thức nấu ăn hiện có.
Mục Lục
Cách yêu cầu người dùng thêm công thức mới
Thêm nội dung ban đầu vào các tệp HTML, CSS và JavaScript. Nếu bạn không quen với các khái niệm phát triển web, có nhiều nơi bạn có thể học phát triển web trực tuyến.
Bạn cũng có thể xem toàn bộ ví dụ về sách công thức trong repo GitHub này.
- Thêm cấu trúc HTML cơ bản vào tệp HTML mới có tên là index.html:
<!DOCTYPE html>
<html>
<head>
<title>Recipe App</title>
</head>
<body>
<nav>
<h1>Recipe App</h1>
</nav>
<div class="container">
</div>
</body>
</html> - Bên trong lớp vùng chứa, hãy tách trang thành cột bên trái và cột bên phải:
<div class="left-column"></div>
<div class="right-column"></div>
- Bên trong cột bên trái, thêm biểu mẫu để người dùng thêm công thức mới. Người dùng có thể nhập tên công thức, danh sách thành phần và phương pháp:
<h3>Add Recipe</h3><form>
<label for="recipe-name">Name:</label>
<input type="text" id="recipe-name" required>
<br /><label for="recipe-ingredients">Ingredients:</label>
<textarea id="recipe-ingredients" rows="5" required></textarea>
<br /><label for="recipe-method">Method:</label>
<textarea id="recipe-method" rows="5" required></textarea>
<br /><button type="submit">Add Recipe</button>
</form> - Trong thẻ đầu của tệp HTML, hãy thêm liên kết đến tệp CSS mới có tên là style.css. Tạo tệp trong cùng thư mục với tệp HTML của bạn:
<link rel="stylesheet" href="styles.css"> - Bên trong tệp CSS, thêm một số kiểu dáng cho trang tổng thể:
body {
font-family: sans-serif;
}nav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
padding: 20px;
left: 0;
color: white;
text-align: center;
}.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 150px 5%;
}.left-column {
width: 25%;
}.right-column {
width: 65%;
} - Thêm một số kiểu dáng cho Thêm công thức nấu ăn hình thức:
form {
display: flex;
flex-direction: column;
}label {
margin-bottom: 10px;
}input[type="text"], textarea {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}button[type="submit"] {
padding: 10px;
background-color: #3338;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
} - Ở cuối thẻ body trong tệp HTML của bạn, hãy thêm liên kết tới tệp JavaScript có tên script.js. Tạo tệp trong cùng một thư mục:
<body>
<script src="script.js"></script>
</body> - Bên trong script.js, sử dụng phương thức querySelector để duyệt qua DOM và lấy phần tử biểu mẫu từ trang.
const form = document.querySelector('form'); - Tạo một mảng mới để lưu trữ các công thức nấu ăn mà người dùng nhập vào biểu mẫu:
let recipes = []; - Trong một chức năng mới, lấy các trường tên, thành phần và phương pháp được nhập qua biểu mẫu. Bạn cũng có thể triển khai xác thực biểu mẫu phía máy khách để ngăn đầu vào không hợp lệ hoặc để kiểm tra xem công thức đã tồn tại chưa.
function handleSubmit(event) {
event.preventDefault();
const nameInput = document.querySelector('#recipe-name');
const ingrInput = document.querySelector('#recipe-ingredients');
const methodInput = document.querySelector('#recipe-method');
const name = nameInput.value.trim();
const ingredients = ingrInput.value.trim().split(',').map(i => i.trim());
const method = methodInput.value.trim();
} - Nếu đầu vào hợp lệ, hãy thêm chúng vào mảng công thức nấu ăn:
if (name && ingredients.length > 0 && method) {
const newRecipe = { name, ingredients, method };
recipes.push(newRecipe);
} - Xóa các đầu vào trên biểu mẫu:
nameInput.value = '';
ingrInput.value = '';
methodInput.value = ''; - Sau hàm handleSubmit(), hãy thêm một trình lắng nghe sự kiện để gọi hàm khi người dùng gửi biểu mẫu:
form.addEventListener('submit', handleSubmit); - Mở index.html trong trình duyệt và xem biểu mẫu bên trái:
Cách hiển thị các công thức đã thêm
Bạn có thể hiển thị các công thức nấu ăn được lưu trữ trong mảng công thức ở phía bên phải của trang.
- Trong tệp HTML, hãy thêm một div để hiển thị danh sách công thức bên trong cột bên phải. Thêm một div khác để hiển thị thông báo nếu không có công thức nấu ăn nào:
<div class="right-column">
<div id="recipe-list"></div>
<div id="no-recipes">You have no recipes.</div>
</div> - Thêm một số kiểu dáng CSS cho danh sách công thức nấu ăn:
#recipe-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}#no-recipes {
display: flex;
background-color: #FFCCCC;
padding: 20px;
border-radius: 8px;
margin-top: 44px;
} - Ở đầu tệp JavaScript, lấy các phần tử HTML được sử dụng để hiển thị danh sách công thức nấu ăn và thông báo lỗi:
const recipeList = document.querySelector('#recipe-list');
const noRecipes = document.getElementById('no-recipes'); - Bên trong một hàm mới, lặp qua từng công thức trong mảng công thức. Đối với mỗi công thức, hãy tạo một div mới để hiển thị công thức đó:
function displayRecipes() {
recipeList.innerHTML = '';
recipes.forEach((recipe, index) => {
const recipeDiv = document.createElement('div');
});
} - Thêm một số nội dung vào div công thức riêng lẻ để hiển thị tên, thành phần và phương pháp. Div cũng sẽ bao gồm một nút xóa. Bạn sẽ thêm chức năng này trong các bước sau:
recipeDiv.innerHTML = `
<h3>${recipe.name}</h3>
<p><strong>Ingredients:</strong></p>
<ul>
${recipe.ingredients.map(ingr => `<li>${ingr}</li>`).join('')}
</ul>
<p><strong>Method:</strong></p>
<p>${recipe.method}</p>
<button class="delete-button" data-index="${index}">Delete</button>`; - Thêm một lớp để tạo kiểu cho div:
recipeDiv.classList.add('recipe'); - Nối div mới vào phần tử HTML RecipeList:
recipeList.appendChild(recipeDiv); - Thêm kiểu dáng cho lớp trong tệp CSS:
.recipe {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}.recipe h3 {
margin-top: 0;
margin-bottom: 10px;
}.recipe ul {
margin: 0;
padding: 0;
list-style: none;
}.recipe ul li {
margin-bottom: 5px;
} - Kiểm tra nếu có nhiều hơn một công thức. Nếu vậy, hãy ẩn thông báo lỗi:
noRecipes.style.display = recipes.length > 0 ? 'none' : 'flex';
- Gọi hàm mới bên trong hàm handleSubmit(), sau khi thêm công thức mới vào mảng công thức:
displayRecipes(); - Mở index.html trong trình duyệt:
- Thêm công thức nấu ăn vào danh sách và xem chúng xuất hiện ở phía bên tay phải:
Cách xóa công thức nấu ăn
Bạn có thể xóa công thức nấu ăn bằng cách nhấp vào Xóa bỏ nút bên dưới hướng dẫn của công thức.
- Thêm một số kiểu CSS cho nút xóa:
.delete-button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}.delete-button:hover {
background-color: #c82333;
} - Trong tệp JavaScript, hãy thêm chức năng mới để xóa công thức:
function handleDelete(event) {}
- Sử dụng sự kiện JavaScript, tìm chỉ mục của công thức mà người dùng đã nhấp vào:
if (event.target.classList.contains('delete-button')) {
const index = event.target.dataset.index;
} - Sử dụng chỉ mục để xóa công thức đã chọn khỏi mảng công thức:
recipes.splice(index, 1); - Làm mới danh sách các công thức nấu ăn được hiển thị trên trang:
displayRecipes(); - Thêm một trình lắng nghe sự kiện để gọi hàm handleDelete() khi người dùng nhấp vào nút xóa:
recipeList.addEventListener('click', handleDelete); - Mở index.html trong trình duyệt. Thêm một công thức để xem nút xóa:
Cách tìm kiếm công thức nấu ăn
Bạn có thể tìm kiếm các công thức nấu ăn bằng thanh tìm kiếm để kiểm tra xem một công thức nhất định có tồn tại hay không.
- Bên trong cột bên phải, thêm thanh tìm kiếm trước danh sách công thức nấu ăn:
<div id="search-section">
<h3>Recipes List</h3>
<label for="search-box">Search:</label>
<input type="text" id="search-box">
</div> - Thêm kiểu dáng CSS cho nhãn thanh tìm kiếm:
label[for="search-box"] {
display: block;
margin-bottom: 10px;
} - Trong script.js, lấy phần tử HTML của hộp tìm kiếm:
const searchBox = document.getElementById('search-box'); - Bên trong một hàm mới, tạo một mảng mới chứa các công thức có tên khớp với đầu vào tìm kiếm:
function search(query) {
const filteredRecipes = recipes.filter(recipe => {
return recipe.name.toLowerCase().includes(query.toLowerCase());
});
} - Xóa danh sách công thức đang hiển thị trên màn hình:
recipeList.innerHTML = ''; - Lặp lại từng công thức được lọc phù hợp với kết quả tìm kiếm và tạo một phần tử div mới:
filteredRecipes.forEach(recipe => {
const recipeEl = document.createElement('div');
}); - Thêm nội dung HTML cho công thức đã lọc vào div:
recipeEl.innerHTML = `
<h3>${recipe.name}</h3>
<p><strong>Ingredients:</strong></p>
<ul>
${recipe.ingredients.map(ingr => `<li>${ingr}</li>`).join('')}
</ul>
<p><strong>Method:</strong></p>
<p>${recipe.method}</p>
<button class="delete-button" data-index="${recipes.indexOf(recipe)}">
Delete
</button>`; - Thêm cùng một lớp công thức để tạo kiểu nhất quán. Thêm div mới vào danh sách hiển thị trên trang:
recipeEl.classList.add('recipe');
recipeList.appendChild(recipeEl); - Thêm một trình xử lý sự kiện để gọi hàm search() khi người dùng nhập vào thanh tìm kiếm:
searchBox.addEventListener('input', event => search(event.target.value)); - Bên trong hàm handleDelete(), xóa hộp tìm kiếm nếu người dùng xóa một mục để làm mới danh sách:
searchBox.value = ''; - Mở index.html trong trình duyệt web để xem thanh tìm kiếm mới và thêm một số công thức nấu ăn:
- Thêm tên công thức vào thanh tìm kiếm để lọc danh sách công thức:
Tạo dự án với HTML, CSS và JavaScript
Dự án này trình bày cách xây dựng giao diện người dùng cho một cuốn sách công thức đơn giản. Lưu ý rằng không có máy chủ phụ trợ và ứng dụng không lưu trữ dữ liệu; nếu bạn làm mới trang, bạn sẽ mất các thay đổi của mình. Một tiện ích mở rộng khả thi mà bạn có thể thực hiện là cơ chế lưu và tải dữ liệu bằng localStorage.
Để cải thiện kỹ năng phát triển web của bạn, hãy tiếp tục khám phá các dự án thú vị khác mà bạn có thể tạo trên máy tính của riêng mình.