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

Моя задача состояла в том, чтобы создать приложение с одним файлом HTML, однако я хотел, чтобы функция листинга и генератор идей еды были разделены на разных страницах. Чтобы это произошло, я создал один главный div, который будет служить «домашней страницей» моего приложения, а затем три ссылки на панели навигации, которые будут служить «ссылками» на домашнюю страницу, функцию списка и генератор идей еды.

Когда прослушиватель событий в функции списка или идее еды запускается щелчком, внутренний HTML-код основного блока устанавливается в пустую строку, а затем новый код отображается в DOM. Таким образом, приложение выглядит как более чем одна страница.

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

Когда вы нажимаете «идеи еды», главный div сбрасывается, а заголовок и кнопка загружаются в DOM.

Когда вы нажимаете «нажмите здесь», запускается прослушиватель событий, который запускает запрос на выборку в мою базу данных JSON:

Чтобы запрос на выборку возвращал случайное блюдо из моей базы данных, я использовал Math.random(), который возвращает «псевдослучайное число» от нуля до 1 (но не включая 1). Затем я умножаю это число на количество записей на моем сервере (которых на данный момент всего шесть), а затем округляю это число с помощью Math.ceil(). Я округляю вверх, а не вниз, так что наименьшее число, которое может быть возвращено, равно 1.

Как только это случайное число создано, я объединяю это случайное число в конец URL-адреса моей базы данных и начинаю запрос на выборку. Ответ преобразуется в строку JSON, а затем передается в мой loadRandomMeal, который создает карточку с фотографией, названием и ссылкой случайного приема пищи. Если вам не нравится идея с едой, текст кнопки предлагает вам снова попытать счастья. Если вам нравится идея еды, вы можете нажать, чтобы получить рецепт, который откроется для вас в новой вкладке.

Было очень весело делать этот проект, и я не могу дождаться, когда у меня появится еще больше навыков, чтобы улучшить его и сделать его красивым.

Спасибо за чтение!