چگونه با استفاده از HTML، CSS و جاوا اسکریپت یک کتاب دستور تهیه کنیم

این پروژه به شما کمک می کند تا مهارت های front-end خود را تقویت کنید و به شما یاد می دهد که چگونه یک رابط با استفاده از استانداردهای اصلی وب بسازید.

پروژه ها یک راه عالی برای بهبود مهارت های HTML، CSS و جاوا اسکریپت شما و تقویت مفاهیم و تکنیک های مهم هستند.

یکی از پروژه هایی که می توانید با آن شروع کنید یک کتاب دستور العمل است که می توانید آن را در مرورگری مانند Google Chrome یا Firefox اجرا کنید.

در کتاب دستور غذا، سمت چپ صفحه وب شامل بخشی است که کاربر می تواند دستور العمل های جدید اضافه کند. در سمت راست صفحه، کاربر می تواند دستور العمل های موجود را مشاهده و جستجو کند.

چگونه از کاربر بخواهیم یک دستور العمل جدید اضافه کند

محتوای اولیه را به فایل های HTML، CSS و JavaScript اضافه کنید. اگر با مفاهیم توسعه وب آشنا نیستید، مکان های زیادی وجود دارد که می توانید توسعه وب را به صورت آنلاین یاد بگیرید.

همچنین می توانید نمونه کامل کتاب دستور غذا را در این مخزن GitHub مشاهده کنید.

ساختار اصلی HTML را در یک فایل HTML جدید به نام index.html اضافه کنید:       برنامه دستور غذا



برنامه دستور غذا
در داخل کلاس کانتینر، صفحه را به یک ستون سمت چپ و یک ستون سمت راست جدا کنید:
در ستون سمت چپ، یک فرم برای کاربر اضافه کنید تا دستور العمل جدیدی اضافه کند. کاربر می‌تواند نام دستور، فهرست مواد و روش را وارد کند:

افزودن دستور غذا

  نام:
  مواد لازم:
روش:
در تگ head فایل HTML، یک پیوند به یک فایل CSS جدید به نام styles.css اضافه کنید. فایل را در همان پوشه فایل HTML خود ایجاد کنید:
داخل فایل CSS، مقداری استایل برای صفحه کلی اضافه کنید: body { font-family: sans-serif;}nav { background-color: #333; موقعیت: ثابت؛ بالا: 0; عرض: 100%؛ بالشتک: 20 پیکسل؛ سمت چپ: 0; رنگ سفید؛ text-align: center;}.container { display: flex; flex-direction: row; justify-content: space-between; حاشیه: 150 پیکسل 5%؛}. ستون چپ { عرض: 25 درصد؛}. ستون سمت راست { عرض: 65 درصد؛}
برای فرم افزودن دستور العمل ها مقداری استایل اضافه کنید: فرم { display: flex; flex-direction: column;}label { margin-bottom: 10px;}input[type=”text”], textarea { padding: 10px; margin-bottom: 10px; حاشیه-شعاع: 5px; حاشیه: 1px جامد #ccc; عرض: 100%؛ box-sizing: border-box;}button[type=”submit”] { padding: 10px; پس زمینه رنگ: #3338; رنگ: #fff; مرز: هیچ حاشیه-شعاع: 5px; مکان نما: اشاره گر؛}
در پایین تگ بدنه در فایل HTML خود، پیوندی به فایل جاوا اسکریپت به نام script.js اضافه کنید. فایل را در همان پوشه ایجاد کنید:
در داخل script.js، از متد querySelector برای عبور از DOM و دریافت عنصر فرم از صفحه استفاده کنید. const form = document.querySelector(‘form’);
یک آرایه جدید برای ذخیره دستور العمل هایی که کاربر در فرم وارد می کند ایجاد کنید: let recipes = [];
در یک تابع جدید، نام، مواد تشکیل دهنده و فیلدهای روش وارد شده از طریق فرم را دریافت کنید. همچنین می‌توانید برای جلوگیری از ورودی‌های نامعتبر، اعتبارسنجی فرم سمت سرویس گیرنده را پیاده‌سازی کنید، یا بررسی کنید که آیا دستوری قبلاً وجود دارد یا خیر. function handleSubmit(event) { // Prevent default form Submission Behavior 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 مواد = ingrInput.value.trim().split(‘,’).map(i => i.trim()); روش const = methodInput.value.trim();}
اگر ورودی‌ها معتبر هستند، آن‌ها را به آرایه دستور العمل‌ها اضافه کنید: if (name && component.length > 0 && method) { const newRecipe = { name, components, method }; recipes.push(newRecipe);}
ورودی های فرم را پاک کنید: nameInput.value = ”;ingrInput.value = ”;methodInput.value = ”;
پس از تابع handleSubmit، یک شنونده رویداد اضافه کنید تا زمانی که کاربر فرم را ارسال می کند، تابع را فراخوانی کند: form.addEventListener(‘submit’, handleSubmit);
index.html را در یک مرورگر باز کنید و فرم را در سمت چپ مشاهده کنید:

<!DOCTYPE html>
<html>
  <head>
    <title>Recipe App</title>
  </head>
  <body>
    <nav>
      <h1>Recipe App</h1>
    </nav>
    <div class="container">
      <!-- Content here -->
    </div>
  </body>
</html>

<div class="left-column">

</div>
<div class="right-column">

</div>

<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>

<link rel="stylesheet" href="styles.css">

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%;
}

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;
}

<body>
  <!-- Content -->
  <script src="script.js"></script>
</body>

const form = document.querySelector('form');

let recipes = [];

function handleSubmit(event) {
  // Prevent default form submission behavior
  event.preventDefault();
  
  // Get recipe name, ingredients, and method input values
  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();
}

if (name && ingredients.length > 0 && method) {
  const newRecipe = { name, ingredients, method };
  recipes.push(newRecipe);
}

nameInput.value = '';
ingrInput.value = '';
methodInput.value = '';

form.addEventListener('submit', handleSubmit);

نحوه نمایش دستور العمل های اضافه شده

می توانید دستور العمل های ذخیره شده در آرایه دستور پخت را در سمت راست صفحه نمایش دهید.

در فایل HTML، یک div اضافه کنید تا لیست دستور العمل ها در ستون سمت راست نمایش داده شود. اگر دستور پختی وجود ندارد، یک div دیگری برای نمایش پیام اضافه کنید:

شما هیچ دستوری ندارید دستور غذاها.
مقداری استایل CSS برای لیست دستور العمل ها اضافه کنید: #recipe-list { display: grid; ستون-الگو-شبکه: تکرار (تناسب خودکار، حداقل حداکثر (300 پیکسل، 1 فر))؛ grid-gap: 20px;}#no-recipes { display: flex; پس زمینه رنگ: #FFCCCC; بالشتک: 20 پیکسل؛ حاشیه شعاع: 8 پیکسل. حاشیه بالا: 44 پیکسل؛}
در بالای فایل جاوا اسکریپت، عناصر HTML مورد استفاده برای نمایش لیست دستور العمل ها و پیام خطا را دریافت کنید: const recipeList = document.querySelector(‘#recipe-list’);const noRecipes = document.getElementById(‘no-recipes’) ;
در داخل یک تابع جدید، هر دستور غذا را در آرایه دستور العمل ها حلقه بزنید. برای هر دستور غذا، یک div جدید برای نمایش آن دستور ایجاد کنید: تابع displayRecipes() { recipeList.innerHTML = ”; recipes.forEach((دستور العمل، فهرست) => { const recipeDiv = document.createElement(‘div’); });}
برای نمایش نام، مواد تشکیل دهنده و روش، مقداری محتوا را به بخش دستور غذا اضافه کنید. div همچنین دارای یک دکمه حذف خواهد بود. این قابلیت را در مراحل بعدی اضافه خواهید کرد: recipeDiv.innerHTML = `

${recipe.name}



مواد تشکیل دهنده:
- ${ingr}
روش:



${recipe.method}

  `;
یک کلاس برای استایل div اضافه کنید: recipeDiv.classList.add(‘recipe’);
div جدید را به عنصر HTML recipeList اضافه کنید: recipeList.appendChild(recipeDiv);
استایل کلاس را در فایل CSS اضافه کنید: .recipe { border: 1px solid #ccc; بالشتک: 10 پیکسل؛ حاشیه-شعاع: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2);}.recipe h3 { margin-top: 0; margin-bottom: 10px;}.recipe ul { margin: 0; بالشتک: 0; list-style: none;}.recipe ul li { margin-bottom: 5px;}
بررسی کنید که آیا بیش از یک دستور غذا وجود دارد یا خیر. اگر چنین است، پیام خطا را پنهان کنید: noRecipes.style.display = recipes.length > 0 ? ‘none’ : ‘flex’;
تابع جدید داخل تابع handleSubmit() را پس از افزودن دستور العمل جدید به آرایه دستورها فراخوانی کنید: displayRecipes();
index.html را در مرورگر باز کنید:
دستور العمل ها را به لیست اضافه کنید و مشاهده کنید که آنها در سمت راست ظاهر می شوند:

<div class="right-column">
  <div id="recipe-list"></div>
  <div id="no-recipes">You have no recipes.</div>
</div>

#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;
}

const recipeList = document.querySelector('#recipe-list');
const noRecipes = document.getElementById('no-recipes');

function displayRecipes() {
  recipeList.innerHTML = '';
  recipes.forEach((recipe, index) => {
    const recipeDiv = document.createElement('div');
  });
}

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>`;

recipeDiv.classList.add('recipe');

recipeList.appendChild(recipeDiv);

.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;
}

displayRecipes();

نحوه حذف دستور العمل ها

شما می توانید با کلیک بر روی دکمه حذف در زیر دستورالعمل های دستور غذا، دستور العمل ها را حذف کنید.

مقداری استایل CSS برای دکمه حذف اضافه کنید: .delete-button { background-color: #dc3545; رنگ: #fff; مرز: هیچ حاشیه-شعاع: 5px; بالشتک: 5px 10px; مکان نما: اشاره گر;}.delete-button:hover { background-color: #c82333;}
در فایل جاوا اسکریپت، یک تابع جدید برای حذف یک دستور اضافه کنید: function handleDelete(event) {}
با استفاده از رویداد جاوا اسکریپت، فهرست دستوری را که کاربر روی آن کلیک کرده است، پیدا کنید: if (event.target.classList.contains(‘delete-button’)) { const index = event.target.dataset.index;}
از ایندکس برای حذف دستور العمل انتخابی از آرایه دستور العمل ها استفاده کنید: recipes.splice(index, 1);
لیست دستور العمل های نمایش داده شده در صفحه را بازخوانی کنید: displayRecipes();
هنگامی که کاربر روی دکمه حذف کلیک می کند، یک رویداد شنونده برای فراخوانی تابع handleDelete() اضافه کنید: recipeList.addEventListener(‘click’, handleDelete);
index.html را در مرورگر باز کنید. برای مشاهده دکمه حذف دستور پخت اضافه کنید:

.delete-button {
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #c82333;
}

function handleDelete(event) {

}

if (event.target.classList.contains('delete-button')) {
  const index = event.target.dataset.index;
}

recipes.splice(index, 1);

displayRecipes();

recipeList.addEventListener('click', handleDelete);

نحوه جستجو برای دستور غذاها

می توانید با استفاده از نوار جستجو دستور العمل ها را جستجو کنید تا بررسی کنید که آیا دستور پخت خاصی وجود دارد یا خیر.

در داخل ستون سمت راست، یک نوار جستجو قبل از فهرست دستور العمل ها اضافه کنید:

فهرست دستور غذاها

جستجو:
اضافه کردن یک سبک CSS برای نوار جستجو label: label[for=”search-box”] { display: block; حاشیه پایین: 10 پیکسل؛}
در script.js، عنصر HTML کادر جستجو را دریافت کنید: const searchBox = document.getElementById(‘search-box’);
در داخل یک تابع جدید، آرایه جدیدی ایجاد کنید که حاوی دستور العمل هایی است که نام آنها با ورودی جستجو مطابقت دارد: تابع search(query) { const filteredRecipes = recipes.filter(recipe => { return recipe.name.toLowerCase().includes(query.toLowerCase ())؛ })؛}
لیست دستور العمل هایی را که در حال حاضر روی صفحه نمایش داده می شود پاک کنید: recipeList.innerHTML = ”;
هر دستور غذایی فیلتر شده را که با نتیجه جستجو مطابقت دارد، حلقه بزنید و یک عنصر div جدید ایجاد کنید: filteredRecipes.forEach(recipe => { const recipeEl = document.createElement(‘div’); });
محتوای HTML دستور پخت فیلتر شده را به div اضافه کنید: recipeEl.innerHTML = `

${recipe.name}



مواد تشکیل دهنده:
- ${ingr}
روش:


${recipe.method}

  `;
برای یک ظاهر طراحی ثابت، همان کلاس دستور غذا را اضافه کنید. div جدید را به لیست نمایش داده شده در صفحه اضافه کنید: recipeEl.classList.add(‘recipe’);recipeList.appendChild(recipeEl);
هنگامی که کاربر در نوار جستجو تایپ می کند، یک رویداد شنونده برای فراخوانی تابع search() اضافه کنید: searchBox.addEventListener(‘input’, event => search(event.target.value));
در داخل تابع handleDelete()، اگر کاربر موردی را حذف کرد، کادر جستجو را پاک کنید تا لیست باز شود: searchBox.value = ”;
index.html را در یک مرورگر وب باز کنید تا نوار جستجوی جدید را مشاهده کنید و چند دستور غذا را اضافه کنید:
برای فیلتر کردن لیست دستور العمل ها، نام دستور غذا را در نوار جستجو اضافه کنید:

<div id="search-section">
  <h3>Recipes List</h3>
  <label for="search-box">Search:</label>
  <input type="text" id="search-box">
</div>

label[for="search-box"] {
  display: block;
  margin-bottom: 10px;
}

const searchBox = document.getElementById('search-box');

function search(query) {
  const filteredRecipes = recipes.filter(recipe => {
    return recipe.name.toLowerCase().includes(query.toLowerCase());
  });
}

recipeList.innerHTML = '';

filteredRecipes.forEach(recipe => {
  const recipeEl = document.createElement('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>`;

recipeEl.classList.add('recipe');
recipeList.appendChild(recipeEl);

searchBox.addEventListener('input', event => search(event.target.value));

searchBox.value = '';

ساخت پروژه با HTML، CSS و جاوا اسکریپت

این پروژه نحوه ساخت یک رابط جلویی برای یک کتاب دستور العمل ساده را نشان می دهد. توجه داشته باشید که هیچ سرور باطنی وجود ندارد و برنامه داده ها را حفظ نمی کند. اگر صفحه را بازخوانی کنید، تغییرات خود را از دست خواهید داد. یکی از برنامه‌های افزودنی ممکن که می‌توانید روی آن کار کنید مکانیزمی برای ذخیره و بارگیری داده‌ها با استفاده از محل ذخیره‌سازی محلی است.

برای بهبود مهارت های توسعه وب خود، به بررسی پروژه های سرگرم کننده دیگری که می توانید در رایانه شخصی خود ایجاد کنید ادامه دهید.

مطلب مرتبط: 5 نکته و ترفند انیمیشن CSS که باید بدانید

چگونه از کاربر بخواهیم یک دستور العمل جدید اضافه کند

افزودن دستور غذا

نحوه نمایش دستور العمل های اضافه شده

${recipe.name}

نحوه حذف دستور العمل ها

نحوه جستجو برای دستور غذاها

فهرست دستور غذاها

${recipe.name}

ساخت پروژه با HTML، CSS و جاوا اسکریپت