كيفية إنشاء كتاب وصفات باستخدام HTML و CSS وجافا سكريبت

تعد المشروعات طريقة رائعة لتحسين مهاراتك في HTML و CSS و JavaScript ، وتعزيز المفاهيم والتقنيات المهمة.

أحد المشاريع التي يمكنك البدء بها هو كتاب وصفات ، والذي يمكنك تشغيله في متصفح مثل Google Chrome أو Firefox.

في كتاب الوصفات ، يشتمل الجانب الأيسر من صفحة الويب على قسم حيث يمكن للمستخدم إضافة وصفات جديدة. على يمين الصفحة ، يمكن للمستخدم عرض الوصفات الموجودة والبحث فيها.

كيف تطلب من المستخدم إضافة وصفة جديدة

أضف المحتوى الأولي إلى ملفات HTML و CSS و JavaScript. إذا لم تكن معتادًا على مفاهيم تطوير الويب ، فهناك العديد من الأماكن حيث يمكنك ذلك تعلم تطوير الويب عبر الإنترنت.

يمكنك أيضًا عرض مثال كتاب الوصفات الكامل في هذا جيثب ريبو.

1. أضف بنية HTML الأساسية في ملف HTML جديد يسمى index.html:

   لغة البرمجة>
   <لغة البرمجة>
   <رأس>
   <عنوان>وصفة التطبيقعنوان>
   رأس>
   <جسم>
   <التنقل>
   <h1>وصفة التطبيقh1>
   التنقل>
   <شعبةفصل="حاوية">
    المحتوى هنا 
   شعبة>
   جسم>
   لغة البرمجة>

2. داخل فئة الحاوية ، افصل الصفحة في عمود أيسر وعمود أيمن:

   <شعبةفصل="العمود الأيسر">
   شعبة>
   <شعبةفصل="العمود الأيمن">
   شعبة>

instagram viewer
3. داخل العمود الأيسر ، أضف نموذجًا للمستخدم لإضافة وصفة جديدة. يمكن للمستخدم إدخال اسم الوصفة وقائمة المكونات والطريقة:

   <h3>أضف الوصفةh3>
   <استمارة>
   <ملصقل="اسم الوصفة">اسم:ملصق>
   <مدخليكتب="نص"بطاقة تعريف="اسم الوصفة"مطلوب>
   <ر />
   <ملصقل="مكونات الوصفة">مكونات:ملصق>
   <منطقة النصبطاقة تعريف="مكونات الوصفة"صفوف="5"مطلوب>منطقة النص>
   <ر />
   <ملصقل="طريقة الوصفة">طريقة:ملصق>
   <منطقة النصبطاقة تعريف="طريقة الوصفة"صفوف="5"مطلوب>منطقة النص>
   <ر />
   <زريكتب="يُقدِّم">أضف الوصفةزر>
   استمارة>

4. في علامة الرأس لملف HTML ، أضف ارتباطًا إلى ملف CSS جديد يسمى styles.css. قم بإنشاء الملف في نفس المجلد مثل ملف HTML الخاص بك:

   <وصلةrel="ورقة الأنماط"href="styles.css">

5. داخل ملف CSS ، أضف بعض الأنماط للصفحة الإجمالية:

   جسم {
   خط العائلة: بلا الرقيق;
   }
   التنقل {
   لون الخلفية: #333;
   موضع: مُثَبَّت;
   قمة: 0;
   عرض: 100%;
   حشوة: 20مقصف;
   غادر: 0;
   لون: أبيض;
   محاذاة النص: مركز;
   }
   .حاوية {
   عرض: ثني;
   الاتجاه المرن: صف;
   تبرير المحتوى: الفضاء بين;
   هامِش: 150مقصف 5%;
   }
   .العمود الأيسر {
   عرض: 25%;
   }
   .العمود الأيمن {
   عرض: 65%;
   }

6. أضف بعض التصميم لـ أضف الوصفات استمارة:

   استمارة {
   عرض: ثني;
   الاتجاه المرن: عمود;
   }
   ملصق {
   الهامش السفلي: 10مقصف;
   }
   مدخل[النوع ="نص"], منطقة النص {
   حشوة: 10مقصف;
   الهامش السفلي: 10مقصف;
   نصف قطر الحد: 5مقصف;
   حدود: 1مقصفصلب#ccc;
   عرض: 100%;
   تحجيم الصندوق: مربع الحدود;
   }
   زر[النوع ="يُقدِّم"] {
   حشوة: 10مقصف;
   لون الخلفية: #3338;
   لون: #fff;
   حدود: لا أحد;
   نصف قطر الحد: 5مقصف;
   المؤشر: المؤشر;
   }

7. في الجزء السفلي من علامة النص الأساسي في ملف HTML ، أضف ارتباطًا إلى ملف JavaScript يسمى script.js. قم بإنشاء الملف في نفس المجلد:

   <جسم>
    محتوى 
   <النصيsrc="script.js">النصي>
   جسم>

8. داخل script.js ، استخدم التابع querySelector من أجل اجتياز DOM واحصل على عنصر النموذج من الصفحة.

   مقدار ثابت شكل = وثيقة.querySelector ('استمارة');

9. أنشئ مصفوفة جديدة لتخزين الوصفات التي يدخلها المستخدم في النموذج:

   يترك وصفات = [] ؛

10. في وظيفة جديدة ، احصل على الاسم والمكونات وحقول الطريقة التي تم إدخالها عبر النموذج. يمكنك أيضا تنفيذ التحقق من صحة النموذج من جانب العميل لمنع المدخلات غير الصالحة ، أو للتحقق مما إذا كانت الوصفة موجودة بالفعل.

    وظيفةمقبض(حدث) {
    // منع سلوك إرسال النموذج الافتراضي
     event.preventDefault () ،
    
    // احصل على اسم الوصفة والمكونات وقيم إدخال الطريقة
    مقدار ثابت اسم الإدخال = وثيقة.querySelector ("# اسم وصفة");
    مقدار ثابت الإدخال = وثيقة.querySelector ("# وصفة-مكونات");
    مقدار ثابت طريقة الإدخال = وثيقة.querySelector ("# طريقة-وصفة");
    مقدار ثابت الاسم = nameInput.value.trim () ؛
    مقدار ثابت المكونات = ingrInput.value.trim (). split (',').خريطة(أنا => i.trim ()) ؛
    مقدار ثابت الطريقة = methodInput.value.trim () ؛
    }

11. إذا كانت المدخلات صحيحة ، فقم بإضافتها إلى مصفوفة الوصفات:

    لو (الاسم والمكونات. الطول> 0 && طريقة) {
    مقدار ثابت newRecipe = {الاسم ، المكونات ، الطريقة} ؛
     recipes.push (newRecipe) ؛
    }

12. امسح المدخلات في النموذج:

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

13. بعد وظيفة handleSubmit () ، أضف مستمع الحدث لاستدعاء الوظيفة عندما يرسل المستخدم النموذج:

    form.addEventListener ('يُقدِّم'، handleSubmit)؛

14. افتح index.html في المتصفح واعرض النموذج على اليسار:

كيفية عرض الوصفات المضافة

يمكنك عرض الوصفات المخزنة في مجموعة الوصفات على الجانب الأيمن من الصفحة.

1. في ملف HTML ، أضف div لعرض قائمة الوصفات داخل العمود الأيمن. أضف div آخر لعرض رسالة إذا لم تكن هناك وصفات:

   <شعبةفصل="العمود الأيمن">
   <شعبةبطاقة تعريف="قائمة الوصفات">شعبة>
   <شعبةبطاقة تعريف="بدون وصفات">ليس لديك وصفات.شعبة>
   شعبة>

2. أضف بعض أنماط CSS لقائمة الوصفات:

   # قائمة الوصفات {
   عرض: شبكة;
   شبكة-قالب-أعمدة: يكرر(احتواء تلقائي, الحد الأدنى - الحد الأقصى(300مقصف, 1الاب));
   فجوة الشبكة: 20مقصف;
   }
   # لا وصفات {
   عرض: ثني;
   لون الخلفية: #FFCCCC;
   حشوة: 20مقصف;
   نصف قطر الحد: 8مقصف;
   الهامش العلوي: 44مقصف;
   }

3. في الجزء العلوي من ملف JavaScript ، احصل على عناصر HTML المستخدمة لعرض قائمة الوصفات ورسالة الخطأ:

   مقدار ثابت recipeList = وثيقة.querySelector ("# قائمة-وصفة");
   مقدار ثابت noRecipes = وثيقة.getElementById ("لا وصفات");

4. داخل وظيفة جديدة ، قم بتكرار كل وصفة في مجموعة الوصفات. لكل وصفة ، قم بإنشاء div جديد لعرض تلك الوصفة:

   وظيفةعرض وصفات() {
    recipeList.innerHTML = '';
    وصفات لكل ((وصفة ، فهرس) => {
   مقدار ثابت recipeDiv ​​= وثيقة.createElement ("div");
    });
   }

5. أضف بعض المحتوى إلى div الوصفة الفردية لعرض الاسم والمكونات والطريقة. سيتضمن div أيضًا زر حذف. ستضيف هذه الوظيفة في خطوات لاحقة:

   recipeDiv.innerHTML = `
   $ {recipe.name} </h3>
   
   
   <قوي>مكونات:قوي></p>
   
   
   
    $ {recipe.ingredients.map (إنجر =>`
   $ {ingr}
   `).ينضم('')}
    </ul>
   <قوي>طريقة:قوي></p>
   
   $ {recipe.method} </p>
   فصل="زر الحذف" مؤشر البيانات ="$ {index}"> حذف </button>`;
   

6. أضف فئة إلى نمط div:

   recipeDiv.classList.add ('وصفة');

7. ألحق div الجديد بعنصر recipeList HTML:

   recipeList.appendChild (recipeDiv) ؛

8. أضف نمط الفصل في ملف CSS:

   .وصفة {
   حدود: 1مقصفصلب#ccc;
   حشوة: 10مقصف;
   نصف قطر الحد: 5مقصف;
   مربع الظل: 0 2مقصف 4مقصفrgba(0,0,0,.2);
   }
   .وصفةh3 {
   الهامش العلوي: 0;
   الهامش السفلي: 10مقصف;
   }
   .وصفةماي {
   هامِش: 0;
   حشوة: 0;
   نمط قائمة: لا أحد;
   }
   .وصفةمايلي {
   الهامش السفلي: 5مقصف;
   }

9. تحقق مما إذا كان هناك أكثر من وصفة. إذا كان الأمر كذلك ، قم بإخفاء رسالة الخطأ:

   noRecipes.style.display = recipes.length> 0؟ "لا شيء": "فليكس" ؛

10. استدع الوظيفة الجديدة داخل التابع handleSubmit () بعد إضافة الوصفة الجديدة إلى مصفوفة الوصفات:

    displayRecipes () ،

11. افتح index.html في المتصفح:
12. أضف الوصفات إلى القائمة وشاهدها تظهر على الجانب الأيمن:

كيفية حذف الوصفات

يمكنك حذف الوصفات من خلال النقر على يمسح زر أسفل تعليمات الوصفة.

1. أضف بعض أنماط CSS لزر الحذف:

   زر حذف {
   لون الخلفية: # dc3545;
   لون: #fff;
   حدود: لا أحد;
   نصف قطر الحد: 5مقصف;
   حشوة: 5مقصف 10مقصف;
   المؤشر: المؤشر;
   }
   زر حذف:يحوم {
   لون الخلفية: # c82333;
   }

2. في ملف JavaScript ، أضف وظيفة جديدة لحذف الوصفة:

   وظيفةمقبضحذف(حدث) {
   }

3. باستخدام حدث JavaScript ، ابحث عن فهرس الوصفة التي نقر المستخدم عليها:

   لو (event.target.classList.contains ("زر الحذف")) {
   مقدار ثابت الفهرس = event.target.dataset.index ؛
   }

4. استخدم الفهرس لحذف الوصفة المحددة من مجموعة الوصفات:

   recipes.splice (فهرس ، 1);

5. قم بتحديث قائمة الوصفات المعروضة على الصفحة:

   displayRecipes () ،

6. أضف مستمع حدث لاستدعاء وظيفة handleDelete () عندما ينقر المستخدم على زر الحذف:

   recipeList.addEventListener ('انقر'، handleDelete) ؛

7. افتح index.html في المتصفح. أضف وصفة لعرض زر الحذف:

كيفية البحث عن الوصفات

يمكنك البحث عن الوصفات باستخدام شريط البحث للتحقق من وجود وصفة معينة.

1. داخل العمود الأيمن ، أضف شريط بحث قبل قائمة الوصفات:

   <شعبةبطاقة تعريف="قسم البحث">
   <h3>قائمة الوصفاتh3>
   <ملصقل="مربع البحث">يبحث:ملصق>
   <مدخليكتب="نص"بطاقة تعريف="مربع البحث">
   شعبة>

2. أضف نمط CSS لتسمية شريط البحث:

   ملصق[="مربع البحث"] {
   عرض: حاجز;
   الهامش السفلي: 10مقصف;
   }

3. في script.js ، احصل على عنصر HTML لمربع البحث:

   مقدار ثابت searchBox = وثيقة.getElementById ("مربع البحث");

4. داخل دالة جديدة ، أنشئ مصفوفة جديدة تحتوي على وصفات يتطابق اسمها مع إدخال البحث:

   وظيفةيبحث(استفسار) {
   مقدار ثابت filteredRecipes = recipes.filter (وصفة => {
   يعود recipe.name.toLowerCase (). include (query.toLowerCase ()) ؛
    });
   }

5. امسح قائمة الوصفات المعروضة حاليًا على الشاشة:

   recipeList.innerHTML = '';

6. قم بالتكرار خلال كل وصفة تمت تصفيتها والتي تطابق نتيجة البحث ، وأنشئ عنصر div جديدًا:

   filteredRecipes.forEach (وصفة => {
   مقدار ثابت وصفة El = وثيقة.createElement ("div"); 
   });

7. أضف محتوى HTML للوصفة المصفاة إلى div:

   recipeEl.innerHTML = `
   $ {recipe.name} </h3>
   
   
   <قوي>مكونات:قوي></p>
   
   
   
    $ {recipe.ingredients.map (إنجر =>`
   $ {ingr}
   `).ينضم('')}
    </ul>
   <قوي>طريقة:قوي></p>
   
   $ {recipe.method} </p>
   فصل="زر الحذف" مؤشر البيانات ="$ {recipes.indexOf (recipe)}">
    يمسح
    </button>`;
   

8. أضف نفس فئة الوصفة لتصفيف متناسق. أضف div الجديد إلى القائمة المعروضة في الصفحة:

   recipeEl.classList.add ('وصفة');
   recipeList.appendChild (recipeEl) ؛

9. أضف مستمع حدث لاستدعاء وظيفة البحث () عندما يكتب المستخدم في شريط البحث:

   searchBox.addEventListener ('مدخل'، event => search (event.target.value)) ؛

10. داخل وظيفة handleDelete () ، امسح مربع البحث إذا قام المستخدم بحذف عنصر ، لتحديث القائمة:

    searchBox.value = '';

11. افتح index.html في متصفح الويب لعرض شريط البحث الجديد ، وأضف بعض الوصفات:
12. أضف اسم وصفة في شريط البحث لتصفية قائمة الوصفات:

إنشاء المشاريع باستخدام HTML و CSS و JavaScript

يوضح هذا المشروع كيفية إنشاء واجهة أمامية لكتاب وصفات بسيط. لاحظ أنه لا يوجد خادم خلفية وأن التطبيق لا يحتفظ بالبيانات ؛ إذا قمت بتحديث الصفحة ، فستفقد تغييراتك. أحد الامتدادات المحتملة التي يمكنك العمل عليها هي آلية لحفظ البيانات وتحميلها باستخدام localStorage.

لتحسين مهارات تطوير الويب لديك ، استمر في استكشاف المشاريع الممتعة الأخرى التي يمكنك إنشاؤها على جهاز الكمبيوتر الخاص بك.