Как создать книгу рецептов с помощью 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"необходимый>текстовая область>
<бр /><кнопкатип="представлять на рассмотрение">Добавить рецепткнопка>
форма>

В теге head файла HTML добавьте ссылку на новый файл CSS с именем styles.css. Создайте файл в той же папке, что и ваш HTML-файл:
```
<связьотн.="таблица стилей"href="стили.css">
```

Внутри файла CSS добавьте стиль для всей страницы:

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

Добавьте стиль для Добавить рецепты форма:

форма {
отображать: сгибаться;
flex-направление: столбец;
}этикетка {
нижняя граница: 10пикс.;
}
вход[тип="текст"], текстовая область {
набивка: 10пикс.;
нижняя граница: 10пикс.;
радиус границы: 5пикс.;
граница: 1пикс.твердый#ccc;
ширина: 100%;
размер коробки: пограничный ящик;
}кнопка[тип="представлять на рассмотрение"] {
набивка: 10пикс.;
фоновый цвет: #3338;
цвет: #ффф;
граница: никто;
радиус границы: 5пикс.;
курсор: указатель;
}

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

В новой функции получите имя, ингредиенты и поля метода, введенные через форму. Вы также можете реализовать проверка формы на стороне клиента чтобы предотвратить ввод неверных данных или проверить, существует ли уже рецепт.

функцияручкаОтправить(событие) {
// Предотвратить отправку формы по умолчанию
 событие.preventDefault();

// Получаем название рецепта, ингредиенты и входные значения метода
константа имяВвод = документ.querySelector('#название-рецепта');
константа вход = документ.querySelector('#рецепт-ингредиенты');
константа метод ввода = документ.querySelector('#рецепт-метод');
константа имя = имяInput.value.trim();
константа ингредиенты = ingrInput.value.trim().split(',').карта(я => i.trim());
константа метод = methodInput.value.trim();
}

Если входные данные действительны, добавьте их в массив recipes:

если (название && ингредиенты.длина > 0 && метод) {
константа newRecipe = {имя, ингредиенты, метод};
 recipes.push(новыйРецепт);
}

Очистите входные данные в форме:

имяВход.значение = '';
ingrInput.value = '';
методInput.value = '';

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

Как отобразить добавленные рецепты

Вы можете отобразить рецепты, хранящиеся в массиве рецептов, в правой части страницы.

В файле HTML добавьте элемент div для отображения списка рецептов в правом столбце. Добавьте еще один div для отображения сообщения, если рецептов нет:
```
<дивсорт="правая колонка">
<дивидентификатор="рецепт-список">див>
<дивидентификатор="без рецептов">У вас нет рецептов.див>
див>
```

Добавьте стиль CSS для списка рецептов:

#список-рецептов {
отображать: сетка;
сетка-шаблон-столбцы: повторить(автоподгонка, мин Макс(300пикс., 1фр));
зазор сетки: 20пикс.;
}#без рецептов {
отображать: сгибаться;
фоновый цвет: #FFCCCC;
набивка: 20пикс.;
радиус границы: 8пикс.;
верхняя граница: 44пикс.;
}

В верхней части файла JavaScript получите элементы HTML, используемые для отображения списка рецептов и сообщения об ошибке:

константа список рецептов = документ.querySelector('#список-рецептов');
константа нет рецептов = документ.getElementById(«без рецептов»);

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

функцияdisplayRecipes() {
 список рецептов.innerHTML = '';
 рецепты.forEach((рецепт, указатель) => {
константа рецептДив = документ.создатьЭлемент('див');
 });
}

Добавьте некоторый контент в отдельный div рецепта, чтобы отобразить название, ингредиенты и метод. В div также будет кнопка удаления. Вы добавите эту функцию на следующих шагах:

recipeDiv.innerHTML = `
${рецепт.название}</h3>


<сильный>Ингредиенты:сильный></p>



 ${рецепт.ингредиенты.карта(ингр =>`${ингр}
`).присоединиться('')}
 </ul>
<сильный>Метод:сильный></p>

${рецепт.метод}</p>

Добавьте класс для стиля div:
```
recipeDiv.classList.add('рецепт');
```
Добавьте новый div к HTML-элементу recipeList:
```
recipeList.appendChild (recipeDiv);
```

Добавьте стиль для класса в файл CSS:

.рецепт {
граница: 1пикс.твердый#ccc;
набивка: 10пикс.;
радиус границы: 5пикс.;
коробка-тень: 0 2пикс. 4пикс.RGBA(0,0,0,.2);
}.рецептh3 {
верхняя граница: 0;
нижняя граница: 10пикс.;
}
.рецептул {
допуск: 0;
набивка: 0;
стиль списка: никто;
}.рецептулли {
нижняя граница: 5пикс.;
}

Проверьте, не существует ли более одного рецепта. Если это так, скройте сообщение об ошибке:
```
noRecipes.style.display = recipes.length > 0? «нет»: «гибкий»;
```
Вызовите новую функцию внутри функции handleSubmit() после добавления нового рецепта в массив recipes:
```
ОтобразитьРецепты();
```
Откройте index.html в браузере:
Добавляйте рецепты в список и смотрите, как они появляются справа:

Как удалить рецепты

Вы можете удалить рецепты, нажав на кнопку Удалить Кнопка под инструкциями рецепта.

Добавьте стили CSS для кнопки удаления:

.удалить-кнопка {
фоновый цвет: #dc3545;
цвет: #ффф;
граница: никто;
радиус границы: 5пикс.;
набивка: 5пикс. 10пикс.;
курсор: указатель;
}.удалить-кнопка:наведите {
фоновый цвет: #c82333;
}

В файле JavaScript добавьте новую функцию для удаления рецепта:
```
функцияручкаудалить(событие) {}
```

Используя событие JavaScript, найдите индекс рецепта, на который нажал пользователь:

если (событие.target.classList.contains('кнопка удаления')) {
константа индекс = событие.цель.набор данных.индекс;
}

Используйте индекс, чтобы удалить выбранный рецепт из массива recipes:
```
recipes.splice (индекс, 1);
```
Обновите список рецептов, отображаемых на странице:
```
ОтобразитьРецепты();
```
Добавьте прослушиватель событий для вызова функции handleDelete(), когда пользователь нажимает кнопку удаления:
```
recipeList.addEventListener('щелкнуть', дескриптор удаления);
```
Откройте index.html в браузере. Добавьте рецепт для просмотра кнопки удаления:

Как искать рецепты

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

Внутри правого столбца добавьте строку поиска перед списком рецептов:

<дивидентификатор="поиск-раздел">
<h3>Список рецептовh3>
<этикеткадля="поисковая строка">Поиск:этикетка>
<входтип="текст"идентификатор="поисковая строка">
див>

Добавьте стиль CSS для метки панели поиска:

этикетка[для ="поисковая строка"] {
отображать: блокировать;
нижняя граница: 10пикс.;
}

В script.js получите HTML-элемент поля поиска:

константа Поле поиска = документ.getElementById('поисковая строка');

Внутри новой функции создайте новый массив, содержащий рецепты, имя которых соответствует входным данным поиска:
```
функцияпоиск(запрос) {
константа filteredRecipes = recipes.filter(рецепт => {
возвращаться recipe.name.toLowerCase().includes (query.toLowerCase());
 });
}
```
Очистить список рецептов, отображаемых в данный момент на экране:
```
список рецептов.innerHTML = '';
```
Прокрутите каждый отфильтрованный рецепт, который соответствует результату поиска, и создайте новый элемент div:
```
filteredRecipes.forEach(рецепт => {
константа рецептЭл = документ.создатьЭлемент('див'); 
});
```

Добавьте содержимое HTML для отфильтрованного рецепта в div:

рецептEl.innerHTML = `
${рецепт.название}</h3>


<сильный>Ингредиенты:сильный></p>



 ${рецепт.ингредиенты.карта(ингр =>`${ингр}
`).присоединиться('')}
 </ul>
<сильный>Метод:сильный></p>

${рецепт.метод}</p>

Добавьте тот же класс рецепта для согласованного стиля. Добавьте новый div в список, отображаемый на странице:
```
рецептЭл.классСписок.добавить('рецепт');
recipeList.appendChild (recipeEl);
```
Добавьте прослушиватель событий для вызова функции search(), когда пользователь вводит в строку поиска:
```
searchBox.addEventListener('вход', событие => поиск (событие.цель.значение));
```
Внутри функции handleDelete() очистите поле поиска, если пользователь удаляет элемент, чтобы обновить список:
```
поле поиска.значение = '';
```
Откройте index.html в веб-браузере, чтобы просмотреть новую панель поиска, и добавьте несколько рецептов:
Добавьте название рецепта в строку поиска, чтобы отфильтровать список рецептов:

Создание проектов с помощью HTML, CSS и JavaScript

Этот проект демонстрирует, как создать внешний интерфейс для простой книги рецептов. Обратите внимание, что внутреннего сервера нет, и приложение не сохраняет данные; если вы обновите страницу, вы потеряете свои изменения. Одним из возможных расширений, над которым вы могли бы поработать, является механизм сохранения и загрузки данных с использованием localStorage.

Чтобы улучшить свои навыки веб-разработки, продолжайте изучать другие забавные проекты, которые вы можете создать на своем компьютере.

About Technology - denizatm.com

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

Как попросить пользователя добавить новый рецепт

Как отобразить добавленные рецепты

${рецепт.название}</h3>

Как удалить рецепты

Как искать рецепты

${рецепт.название}</h3>

Создание проектов с помощью HTML, CSS и JavaScript

категории

Recent Post

Как создать персональную вики с помощью Microsoft OneNote

Kdenlive - стабильный и универсальный бесплатный кроссплатформенный редактор видео [Linux, Mac и Live CD]

5 лучших бесплатных VPN для iPhone