כיצד ליצור ספר מתכונים באמצעות HTML, CSS ו-JavaScript

פרויקט זה יעזור לך לחדד את כישורי החזית שלך וללמד אותך כיצד לבנות ממשק באמצעות תקני אינטרנט מרכזיים.

פרויקטים הם דרך מצוינת לשפר את כישורי HTML, CSS ו-JavaScript שלך, ולחזק מושגים וטכניקות חשובות.

פרויקט אחד שאתה יכול להתחיל איתו הוא ספר מתכונים, אותו אתה יכול להפעיל בדפדפן כמו גוגל כרום או פיירפוקס.

בספר המתכונים, הצד השמאלי של דף האינטרנט כולל קטע שבו המשתמש יכול להוסיף מתכונים חדשים. בצד ימין של העמוד, המשתמש יכול להציג ולחפש מתכונים קיימים.

כיצד לבקש מהמשתמש להוסיף מתכון חדש

הוסף את התוכן הראשוני לקובצי HTML, CSS ו-JavaScript. אם אתה לא מכיר מושגי פיתוח אתרים, יש הרבה מקומות שבהם אתה יכול ללמוד פיתוח אתרים באינטרנט.

אתה יכול גם לצפות בדוגמה המלאה של ספר המתכונים בזה ריפו של GitHub.

הוסף את מבנה ה-HTML הבסיסי בקובץ HTML חדש בשם index.html:

html>
<html>
<רֹאשׁ>
<כותרת>אפליקציית מתכוניםכותרת>
רֹאשׁ>
<גוּף>
<nav>
<h1>אפליקציית מתכוניםh1>
nav>
<divמעמד="מְכוֹלָה">
 תוכן כאן 
div>
גוּף>
html>

בתוך מחלקת המכולה, הפרד את הדף לעמודה שמאלית ועמודה ימנית:
```
<divמעמד="עמודה שמאל">div>
<divמעמד="עמודה ימנית">div>
```

בתוך העמודה השמאלית, הוסף טופס למשתמש להוספת מתכון חדש. המשתמש יכול להזין את שם המתכון, רשימת המרכיבים ושיטה:

instagram viewer

<h3>הוסף מתכוןh3><טופס>
<תוויתל="שם מתכון">שֵׁם:תווית>
<קֶלֶטסוּג="טֶקסט"תְעוּדַת זֶהוּת="שם מתכון"נדרש>
<br />
<תוויתל="מרכיבי מתכון">רכיבים:תווית>
<אזור טקסטתְעוּדַת זֶהוּת="מרכיבי מתכון"שורות="5"נדרש>אזור טקסט>
<br />
<תוויתל="מתכונים-שיטת">שיטה:תווית>
<אזור טקסטתְעוּדַת זֶהוּת="מתכונים-שיטת"שורות="5"נדרש>אזור טקסט>
<br /><לַחְצָןסוּג="שלח">הוסף מתכוןלַחְצָן>
טופס>

בתג head של קובץ ה-HTML, הוסף קישור לקובץ CSS חדש בשם styles.css. צור את הקובץ באותה תיקיה כמו קובץ ה-HTML שלך:
```
<קישורrel="גיליון סגנונות"href="styles.css">
```

בתוך קובץ ה-CSS, הוסף קצת סגנון עבור הדף הכולל:

גוּף {
משפחת גופן: פונט סאנס סריף;
}nav {
צבע רקע: #333;
עמדה: תוקן;
חלק עליון: 0;
רוֹחַב: 100%;
ריפוד: 20פיקסלים;
שמאלה: 0;
צֶבַע: לבן;
יישור טקסט: מֶרְכָּז;
}
.מְכוֹלָה {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: שׁוּרָה;
להצדיק-תוכן: רווח-בין;
שולים: 150פיקסלים 5%;
}
עמודה שמאל {
רוֹחַב: 25%;
}.עמודה ימנית {
רוֹחַב: 65%;
}

הוסף קצת סטיילינג עבור הוסף מתכונים טופס:

טופס {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
}תווית {
שוליים-תחתית: 10פיקסלים;
}
קֶלֶט[סוג="טֶקסט"], אזור טקסט {
ריפוד: 10פיקסלים;
שוליים-תחתית: 10פיקסלים;
גבול-רדיוס: 5פיקסלים;
גבול: 1פיקסליםמוצק#ccc;
רוֹחַב: 100%;
גודל קופסא: תיבת גבול;
}לַחְצָן[סוג="שלח"] {
ריפוד: 10פיקסלים;
צבע רקע: #3338;
צֶבַע: #fff;
גבול: אף אחד;
גבול-רדיוס: 5פיקסלים;
סַמָן: מַצבִּיעַ;
}

בתחתית תג הגוף בקובץ ה-HTML שלך, הוסף קישור לקובץ JavaScript בשם script.js. צור את הקובץ באותה תיקיה:
```
<גוּף>
 תוֹכֶן 
<תַסרִיטsrc="script.js">תַסרִיט>
גוּף>
```
בתוך script.js, השתמש בשיטת querySelector כדי לחצות את ה-DOM וקבל את אלמנט הטופס מהדף.
```
const טופס = מסמך.querySelector('טופס');
```
צור מערך חדש לאחסון מתכונים שהמשתמש מזין בטופס:
```
לתת מתכונים = [];
```

בפונקציה חדשה, קבל את השם, המרכיבים ושדות השיטה שהוזנו באמצעות הטופס. אתה יכול גם ליישם אימות טפסים בצד הלקוח כדי למנוע קלטות לא חוקיות, או לבדוק אם כבר קיים מתכון.

פוּנקצִיָהhandleSubmit(מִקרֶה) {
// מנע התנהגות ברירת מחדל של שליחת טופס
 event.preventDefault();

// קבל את שם המתכון, המרכיבים וערכי קלט השיטה
const nameInput = מסמך.querySelector('#שם-מתכון');
const ingrInput = מסמך.querySelector('#מתכון-מרכיבים');
const methodInput = מסמך.querySelector('#מתכונים-שיטה');
const name = nameInput.value.trim();
const ingredients = ingrInput.value.trim().split(',').מַפָּה(אני => i.trim());
const method = methodInput.value.trim();
}

אם הקלטים תקפים, הוסף אותם למערך המתכונים:

אם (שם && ingredients.length > 0 && שיטה) {
const newRecipe = { שם, מרכיבים, שיטה };
 recepts.push (מתכון חדש);
}

נקה את הקלט בטופס:

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

לאחר הפונקציה handleSubmit(), הוסף מאזין אירועים כדי לקרוא לפונקציה כאשר המשתמש שולח את הטופס:
```
form.addEventListener('שלח', handleSubmit);
```
פתח את index.html בדפדפן והצג את הטופס בצד שמאל:

כיצד להציג מתכונים שנוספו

ניתן להציג את המתכונים המאוחסנים במערך המתכונים בצד ימין של העמוד.

בקובץ ה-HTML, הוסף div כדי להציג את רשימת המתכונים בעמודה הימנית. הוסף div נוסף כדי להציג הודעה אם אין מתכונים:

<divמעמד="עמודה ימנית">
<divתְעוּדַת זֶהוּת="רשימת מתכונים">div>
<divתְעוּדַת זֶהוּת="בלי מתכונים">אין לך מתכונים.div>
div>

הוסף קצת עיצוב CSS לרשימת המתכונים:

#רשימת מתכונים {
לְהַצִיג: רֶשֶׁת;
עמודות-תבנית-רשת: חזור(התאמה אוטומטית, מינימום מקסימום(300פיקסלים, 1fr));
רשת-פער: 20פיקסלים;
}#ללא מתכונים {
לְהַצִיג: לְהַגמִישׁ;
צבע רקע: #FFCCCC;
ריפוד: 20פיקסלים;
גבול-רדיוס: 8פיקסלים;
שוליים למעלה: 44פיקסלים;
}

בחלק העליון של קובץ JavaScript, קבל את רכיבי ה-HTML המשמשים להצגת רשימת המתכונים והודעת השגיאה:

const רשימת מתכונים = מסמך.querySelector('#רשימת מתכונים');
const אין מתכונים = מסמך.getElementById('בלי מתכונים');

בתוך פונקציה חדשה, עברו בלולאה דרך כל מתכון במערך המתכונים. עבור כל מתכון, צור div חדש כדי להציג את המתכון הזה:
```
פוּנקצִיָהמציג מתכונים() {
 recipeList.innerHTML = '';
 recipes.forEach((מתכון, אינדקס) => {
const recipeDiv = מסמך‎.createElement('div');
 });
}
```

הוסף קצת תוכן ל-div המתכון האישי כדי להציג את השם, המרכיבים והשיטה. ה-div יכלול גם כפתור מחיקה. תוסיף את הפונקציונליות הזו בשלבים מאוחרים יותר:

recipeDiv.innerHTML = `
${recipe.name}</h3>


<חָזָק>רכיבים:חָזָק></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).לְהִצְטַרֵף('')}
 </ul>
<חָזָק>שיטה:חָזָק></p>

${recipe.method}</p>

הוסף מחלקה לסגנון ה-div:
```
recipeDiv.classList.add('מתכון');
```
הוסף את ה-div החדש לרכיב HTML של receptList:
```
recipeList.appendChild (recipeDiv);
```

הוסף את הסגנון של המחלקה בקובץ ה-CSS:

.מתכון {
גבול: 1פיקסליםמוצק#ccc;
ריפוד: 10פיקסלים;
גבול-רדיוס: 5פיקסלים;
צל קופסא: 0 2פיקסלים 4פיקסליםrgba(0,0,0,.2);
}.מתכוןh3 {
שוליים למעלה: 0;
שוליים-תחתית: 10פיקסלים;
}
.מתכוןul {
שולים: 0;
ריפוד: 0;
בסגנון רשימה: אף אחד;
}.מתכוןulלי {
שוליים-תחתית: 5פיקסלים;
}

בדוק אם יש יותר ממתכון אחד. אם כן, הסתר את הודעת השגיאה:
```
noRecipes.style.display = recipes.length > 0? 'none': 'flex';
```
קרא לפונקציה החדשה בתוך הפונקציה handleSubmit() לאחר הוספת המתכון החדש למערך המתכונים:
```
displayRecipes();
```
פתח את index.html בדפדפן:
הוסף מתכונים לרשימה וצפה בהם מופיעים בצד ימין:

כיצד למחוק מתכונים

אתה יכול למחוק מתכונים על ידי לחיצה על לִמְחוֹק לחצן מתחת להוראות של מתכון.

הוסף קצת סגנון CSS עבור כפתור המחיקה:

.מחק-לחצן {
צבע רקע: #dc3545;
צֶבַע: #fff;
גבול: אף אחד;
גבול-רדיוס: 5פיקסלים;
ריפוד: 5פיקסלים 10פיקסלים;
סַמָן: מַצבִּיעַ;
}.מחק-לחצן:לְרַחֵף {
צבע רקע: #c82333;
}

בקובץ JavaScript, הוסף פונקציה חדשה למחיקת מתכון:
```
פוּנקצִיָהhandleDelete(מִקרֶה) {}
```
באמצעות אירוע JavaScript, מצא את האינדקס של המתכון שהמשתמש לחץ עליו:
```
אם (event.target.classList.contains('לחצן מחיקה')) {
const index = event.target.dataset.index;
}
```
השתמש באינדקס כדי למחוק את המתכון שנבחר ממערך המתכונים:
```
recepts.splice (אינדקס, 1);
```
רענן את רשימת המתכונים המוצגת בעמוד:
```
displayRecipes();
```
הוסף מאזין אירועים כדי לקרוא לפונקציה handleDelete() כאשר המשתמש לוחץ על כפתור המחיקה:
```
recipeList.addEventListener('נְקִישָׁה', handleDelete);
```
פתח את index.html בדפדפן. הוסף מתכון לצפייה בכפתור המחיקה:

איך לחפש מתכונים

ניתן לחפש מתכונים באמצעות סרגל החיפוש כדי לבדוק אם קיים מתכון מסוים.

בתוך העמודה הימנית, הוסף סרגל חיפוש לפני רשימת המתכונים:

<divתְעוּדַת זֶהוּת="מדור חיפוש">
<h3>רשימת מתכוניםh3>
<תוויתל="תיבת חיפוש">לחפש:תווית>
<קֶלֶטסוּג="טֶקסט"תְעוּדַת זֶהוּת="תיבת חיפוש">
div>

הוסף סגנון CSS עבור תווית סרגל החיפוש:

תווית[עבור="תיבת חיפוש"] {
לְהַצִיג: לַחסוֹם;
שוליים-תחתית: 10פיקסלים;
}

ב-script.js, קבל את רכיב ה-HTML של תיבת החיפוש:

const תיבת חיפוש = מסמך.getElementById('תיבת חיפוש');

בתוך פונקציה חדשה, צור מערך חדש המכיל מתכונים ששמם תואם לקלט החיפוש:

פוּנקצִיָהלחפש(שאילתא) {
const filteredRecipes = recipes.filter(מתכון => {
לַחֲזוֹר recipe.name.toLowerCase().includes (query.toLowerCase());
 });
}

נקה את רשימת המתכונים המוצגת כעת על המסך:
```
recipeList.innerHTML = '';
```
עברו בלולאה בכל מתכון מסונן התואם את תוצאת החיפוש, וצור רכיב div חדש:
```
filteredRecipes.forEach(מתכון => {
const מתכוןEl = מסמך‎.createElement('div'); 
});
```

הוסף את תוכן ה-HTML של המתכון המסונן ל-div:

recipeEl.innerHTML = `
${recipe.name}</h3>


<חָזָק>רכיבים:חָזָק></p>



 ${recipe.ingredients.map(ingr =>`${ingr}
`).לְהִצְטַרֵף('')}
 </ul>
<חָזָק>שיטה:חָזָק></p>

${recipe.method}</p>

הוסף את אותה מחלקת מתכונים לעיצוב עקבי. הוסף את ה-div החדש לרשימה המוצגת בעמוד:
```
recipeEl.classList.add('מתכון');
recipeList.appendChild (recipeEl);
```
הוסף מאזין אירועים כדי לקרוא לפונקציית החיפוש() כאשר המשתמש מקליד בסרגל החיפוש:
```
searchBox.addEventListener('קֶלֶט', event => חיפוש (event.target.value));
```
בתוך הפונקציה handleDelete(), נקה את תיבת החיפוש אם המשתמש מוחק פריט, כדי לרענן את הרשימה:
```
searchBox.value = '';
```
פתח את index.html בדפדפן אינטרנט כדי להציג את סרגל החיפוש החדש, והוסף כמה מתכונים:
הוסף שם מתכון לסרגל החיפוש כדי לסנן את רשימת המתכונים:

יצירת פרויקטים עם HTML, CSS ו-JavaScript

פרויקט זה מדגים כיצד לבנות ממשק קצה עבור ספר מתכונים פשוט. שים לב שאין שרת אחורי והאפליקציה לא מחזיקה נתונים; אם תרענן את הדף, תאבד את השינויים שלך. הרחבה אפשרית אחת שתוכל לעבוד עליה היא מנגנון לשמירה וטעינת נתונים באמצעות localStorage.

כדי לשפר את כישורי פיתוח האינטרנט שלך, המשך לחקור פרויקטים מהנים אחרים שאתה יכול ליצור במחשב שלך.

About Technology - denizatm.com

כיצד ליצור ספר מתכונים באמצעות HTML, CSS ו-JavaScript

כיצד לבקש מהמשתמש להוסיף מתכון חדש

כיצד להציג מתכונים שנוספו

${recipe.name}</h3>

כיצד למחוק מתכונים

איך לחפש מתכונים

${recipe.name}</h3>

יצירת פרויקטים עם HTML, CSS ו-JavaScript

קטגוריות

Recent Post

4 סוגי מחברי IEM וכיצד הם שונים

כיצד להסיר את תג ההתראה האדום מאפליקציית ההודעות של iPhone

כיצד להחיל מצב כהה על אתרים בגוגל כרום