Будь то классическая маргарита или более крепкий виски, коктейли подойдут каждому взрослому. На этом сайте представлены коктейли как классические, так и современные, крепкие и безалкогольные, с сотнями рецептов на выбор. Из простой идеи эта страница превратилась в полнофункциональное приложение, которое я предлагаю вам: Фабрика коктейлей.

Планирование

Много времени было потрачено на размышления о том, что построить для моего приложения. Я обдумывал множество идей, включая средство выбора фильмов, приложение для тренировок, приложение с новостями/ценами на криптовалюту и даже интеллектуальный детектор вспышек Covid-19, который предупреждал бы о новых вспышках. В конце концов я остановился на приложении, связанном с коктейлями, из-за коктейльной вечеринки, которая должна была состояться через пару недель.

Я изложил то, что было моим желаемым продуктом:

  • Простое приложение с панелью навигации, которая при выборе каждого элемента скрывала остальные функции.

Производство

Так началось создание приложения, как и любой другой проект. Базовая структура HTML, немного JavaScript для сопровождения. CSS пойдет дальше.

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

Внутри файла HTML я сделал «div» под названием «workingArea», и в нем вы найдете все функции приложения. Итак, у меня был свой HTML… 28 строк. Остальная часть приложения будет построена с использованием JavaScript и DOM.

Я создал одну гибкую функцию, которая извлекала бы всю необходимую информацию из API коктейля, а остальные функции построил вокруг этой функции.

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

Как всегда, я решил потратить дополнительное время на формирование JavaScript таким образом, чтобы упростить будущую разработку и не забыть — максимально эффективно.