Как да създадете книга с рецепти с помощта на HTML, CSS и JavaScript

Този проект ще ви помогне да усъвършенствате уменията си за преден край и ще ви научи как да изградите интерфейс, като използвате основните уеб стандарти.

Проектите са чудесен начин да подобрите уменията си за HTML, CSS и JavaScript и да затвърдите важни концепции и техники.

Един проект, с който можете да започнете, е книга с рецепти, която можете да стартирате в браузър като Google Chrome или Firefox.

В книгата с рецепти лявата страна на уеб страницата включва раздел, където потребителят може да добавя нови рецепти. Вдясно на страницата потребителят може да преглежда и търси в съществуващите рецепти.

Как да помолите потребителя да добави нова рецепта

Добавете първоначалното съдържание към HTML, CSS и JavaScript файловете. Ако не сте запознати с концепциите за уеб разработка, има много места, където можете научете уеб разработка онлайн.

Можете също така да видите примера на пълната книга с рецепти тук GitHub репо.

Добавете основната HTML структура в нов HTML файл, наречен index.html:

html>
<html>




instagram viewer


<глава>
<заглавие>Приложение за рецептизаглавие>
глава>
<тяло>
<нав>
<h1>Приложение за рецептиh1>
нав>
<дивклас="контейнер">
 Съдържание тук 
див>
тяло>
html>

Вътре в класа контейнер, разделете страницата на лява колона и дясна колона:
```
<дивклас="лява колона">див>
<дивклас="дясна колона">див>
```

В лявата колона добавете формуляр за потребителя да добави нова рецепта. Потребителят може да въведе името на рецептата, списъка със съставките и метода:

<h3>Добавяне на рецептаh3><форма>
<етикетза="рецепта-име">Име:етикет>
<входТип="текст"документ за самоличност="рецепта-име"изисква се>
<бр />
<етикетза="рецепта-съставки">съставки:етикет>
<текстово поледокумент за самоличност="рецепта-съставки"редове="5"изисква се>текстово поле>
<бр />
<етикетза="рецепта-метод">Метод:етикет>
<текстово поледокумент за самоличност="рецепта-метод"редове="5"изисква се>текстово поле>
<бр /><бутонТип="Изпращане">Добавяне на рецептабутон>
форма>

В заглавния таг на HTML файла добавете връзка към нов CSS файл, наречен styles.css. Създайте файла в същата папка като вашия HTML файл:
```
<връзкаотн="стилов лист"href="styles.css">
```

Вътре в CSS файла добавете някакъв стил за цялата страница:

тяло {
шрифтово семейство: безсерифен;
}нав {
Цвят на фона: #333;
позиция: фиксирани;
Горна част: 0;
ширина: 100%;
подплата: 20px;
наляво: 0;
цвят: бяло;
подравняване на текст: център;
}
.контейнер {
дисплей: flex;
flex-direction: ред;
justify-content: интервал между;
марж: 150px 5%;
}
.лява колона {
ширина: 25%;
}.дясна колона {
ширина: 65%;
}

Добавете малко стил за Добавяне на рецепти форма:

форма {
дисплей: flex;
flex-direction: колона;
}етикет {
margin-bottom: 10px;
}
вход[тип="текст"], текстово поле {
подплата: 10px;
margin-bottom: 10px;
граница-радиус: 5px;
граница: 1pxтвърдо#ccc;
ширина: 100%;
оразмеряване на кутията: гранична кутия;
}бутон[тип="Изпращане"] {
подплата: 10px;
Цвят на фона: #3338;
цвят: #Ф ф ф;
граница: нито един;
граница-радиус: 5px;
курсор: показалец;
}

В долната част на етикета body във вашия HTML файл добавете връзка към JavaScript файл, наречен script.js. Създайте файла в същата папка:
```
<тяло>
 Съдържание 
<сценарийsrc="script.js">сценарий>
тяло>
```
Вътре в script.js използвайте метода querySelector, за да пресечете DOM и вземете елемента на формуляра от страницата.
```
конст форма = документ.querySelector("форма");
```
Създайте нов масив за съхраняване на рецепти, които потребителят въвежда във формуляра:
```
позволявам рецепти = [];
```

В нова функция вземете полетата за име, съставки и метод, въведени чрез формуляра. Можете също да приложите валидиране на формуляр от страна на клиента за предотвратяване на невалидни въведени данни или за проверка дали вече съществува рецепта.

функцияhandleSubmit(събитие) {
// Предотвратяване на поведението при подаване на формуляр по подразбиране
 event.preventDefault();

// Получаване на име на рецепта, съставки и входни стойности на метода
конст nameInput = документ.querySelector('#име-рецепта');
конст ingrInput = документ.querySelector('#recipe-ingredients');
конст methodInput = документ.querySelector('#рецепта-метод');
конст име = nameInput.value.trim();
конст съставки = ingrInput.value.trim().split(',').map(аз => i.trim());
конст метод = methodInput.value.trim();
}

Ако въведените данни са валидни, добавете ги към масива с рецепти:

ако (име && съставки.дължина > 0 && метод) {
конст newRecipe = {име, съставки, метод};
 recipes.push (newRecipe);
}

Изчистете въведените във формуляра:

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

След функцията handleSubmit() добавете слушател на събития за извикване на функцията, когато потребителят изпрати формуляра:
```
form.addEventListener('Изпращане', handleSubmit);
```
Отворете index.html в браузър и вижте формуляра отляво:

Как да покажа добавените рецепти

Можете да покажете рецептите, съхранени в масива с рецепти от дясната страна на страницата.

В HTML файла добавете div, за да покажете списъка с рецепти в дясната колона. Добавете друг div за показване на съобщение, ако няма рецепти:

<дивклас="дясна колона">
<дивдокумент за самоличност="списък с рецепти">див>
<дивдокумент за самоличност="без рецепти">Нямате рецепти.див>
див>

Добавете малко CSS стил за списъка с рецепти:

#списък с рецепти {
дисплей: решетка;
grid-template-colons: повторете(автоматично напасване, minmax(300px, 1фр));
решетка-пролука: 20px;
}#безрецепти {
дисплей: flex;
Цвят на фона: #FFCCCC;
подплата: 20px;
граница-радиус: 8px;
margin-top: 44px;
}

В горната част на JavaScript файла вземете HTML елементите, използвани за показване на списъка с рецепти и съобщението за грешка:
```
конст Списък с рецепти = документ.querySelector('#списък с рецепти');
конст noRecipes = документ.getElementById("без рецепти");
```
В нова функция превъртете всяка рецепта в масива с рецепти. За всяка рецепта създайте нов div, за да покажете тази рецепта:
```
функцияdisplayRecipes() {
 recipeList.innerHTML = '';
 recipes.forEach((рецепта, индекс) => {
конст recipeDiv = документ.createElement("div");
 });
}
```

Добавете малко съдържание към отделния раздел div за рецепта, за да покажете името, съставките и метода. Div ще включва и бутон за изтриване. Ще добавите тази функционалност в по-късни стъпки:

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


<силен>съставки:силен></p>



 ${recipe.ingredients.map(ингр =>`${ingr}
`).присъединяване('')}
 </ul>
<силен>Метод:силен></p>

${recipe.method}</p>

Добавете клас за стилизиране на div:
```
recipeDiv.classList.add("рецепта");
```
Добавете новия div към HTML елемента recipeList:
```
recipeList.appendChild (recipeDiv);
```

Добавете стила за класа в CSS файла:

.рецепта {
граница: 1pxтвърдо#ccc;
подплата: 10px;
граница-радиус: 5px;
кутия-сянка: 0 2px 4pxrgba(0,0,0,.2);
}.рецептаh3 {
margin-top: 0;
margin-bottom: 10px;
}
.рецептаул {
марж: 0;
подплата: 0;
стил на списък: нито един;
}.рецептаулли {
margin-bottom: 5px;
}

Проверете дали има повече от една рецепта. Ако е така, скрийте съобщението за грешка:
```
noRecipes.style.display = recipes.length > 0? 'няма': 'гъвкав';
```
Извикайте новата функция във функцията handleSubmit(), след като добавите новата рецепта в масива recipes:
```
displayRecipes();
```
Отворете index.html в браузър:
Добавете рецепти към списъка и ги гледайте да се появяват от дясната страна:

Как да изтриете рецепти

Можете да изтриете рецепти, като щракнете върху Изтрий бутон под инструкциите на рецептата.

Добавете малко CSS стил за бутона за изтриване:

.бутон за изтриване {
Цвят на фона: #dc3545;
цвят: #Ф ф ф;
граница: нито един;
граница-радиус: 5px;
подплата: 5px 10px;
курсор: показалец;
}.бутон за изтриване:задръжте {
Цвят на фона: #c82333;
}

В JavaScript файла добавете нова функция за изтриване на рецепта:
```
функцияhandleDelete(събитие) {}
```
Използвайки събитието JavaScript, намерете индекса на рецептата, върху която потребителят е кликнал:
```
ако (event.target.classList.contains('бутон за изтриване')) {
конст индекс = event.target.dataset.index;
}
```
Използвайте индекса, за да изтриете избраната рецепта от масива с рецепти:
```
recipes.splice (индекс, 1);
```
Обновете списъка с рецепти, показан на страницата:
```
displayRecipes();
```
Добавете слушател на събития, за да извикате функцията handleDelete(), когато потребителят щракне върху бутона за изтриване:
```
recipeList.addEventListener('клик', handleDelete);
```
Отворете index.html в браузър. Добавете рецепта, за да видите бутона за изтриване:

Как да търсите рецепти

Можете да търсите рецепти с помощта на лентата за търсене, за да проверите дали определена рецепта съществува.

В дясната колона добавете лента за търсене преди списъка с рецепти:

<дивдокумент за самоличност="секция за търсене">
<h3>Списък с рецептиh3>
<етикетза="кутия за търсене">Търсене:етикет>
<входТип="текст"документ за самоличност="кутия за търсене">
див>

Добавете CSS стил за етикета на лентата за търсене:

етикет[за="кутия за търсене"] {
дисплей: блок;
margin-bottom: 10px;
}

В script.js вземете HTML елемента на полето за търсене:

конст searchBox = документ.getElementById('поле за търсене');

В нова функция създайте нов масив, който съдържа рецепти, чието име съответства на въведеното за търсене:

функцияТърсене(заявка) {
конст filteredRecipes = recipes.filter(рецепта => {
връщане recipe.name.toLowerCase().включва (query.toLowerCase());
 });
}

Изчистете списъка с рецепти, показан в момента на екрана:
```
recipeList.innerHTML = '';
```
Прегледайте всяка филтрирана рецепта, която съответства на резултата от търсенето, и създайте нов елемент div:
```
filteredRecipes.forEach(рецепта => {
конст рецептаEl = документ.createElement("div"); 
});
```

Добавете HTML съдържанието за филтрираната рецепта към div:

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


<силен>съставки:силен></p>



 ${recipe.ingredients.map(ингр =>`${ingr}
`).присъединяване('')}
 </ul>
<силен>Метод:силен></p>

${recipe.method}</p>

Добавете същия клас рецепти за последователен стил. Добавете новия div към списъка, показан на страницата:
```
recipeEl.classList.add("рецепта");
recipeList.appendChild (recipeEl);
```
Добавете слушател на събития за извикване на функцията search(), когато потребителят въвежда в лентата за търсене:
```
searchBox.addEventListener('вход', събитие => търсене (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

Дразни всички, които познавате с нон-стоп Nyan Cat!

5-те най-добри Spotify приложения, изградени от звукозаписни издания

Дейв Парак, автор на MakeUseOf