Время помяукать: размышления о первом проекте

За 3 месяца может произойти многое. Я начал свой путь в Flatiron's Software Engineering Bootcamp, одновременно работая полный рабочий день, открыл для себя HTML и CSS, испытал все прелести и недостатки JavaScript (ошибки, как правило, совершаемые самостоятельно) и завершил свое первое фронтенд-приложение. Захватывающие времена! Проведя много времени за чертежной доской, я решил создать забавное интерактивное приложение, которое позволит пользователям прочитать интересный факт о кошках вместе с картинками. Так появилось приложение Take a Time Meowt.

Взаимодействуя с Cat Facts, пользователи могут нажать кнопку "Мяу", чтобы получить случайную пару фактов и изображений. Если снова нажать "Мяу", будет выдана новая пара. Пользователь может "лайкнуть" пару факт/изображение столько раз, сколько захочет. Количество "лайков" может быть важным в дальнейшем, если вы захотите "Усыновить".
При нажатии кнопки "Усыновить" количество фактов, изображений и лайков сохраняется в нижней части экрана. Таким образом, пользователь может ранжировать пары по своему усмотрению.
Нажатие кнопки "Hiss" очистит все содержимое.

Рефакторинг

Я начал работу над проектом с изучения API. Cat Fact использует два разных API: один для фактов, другой для изображений. Поиск бесплатных, общедоступных API без авторизации был ключевым моментом! Первоначально две мои функции Fetch были довольно длинными и нуждались в некоторой обрезке. Рефакторинг- реструктуризация кода без изменения его поведения- позволил мне с большей легкостью увидеть, как мой код течет, взаимодействует и работает. Ниже вы можете видеть, что факты передаются в качестве аргумента для функции обратного вызова, которая объявлена под ней.

Слушатели событий

В моем приложении есть 5 слушателей событий; по одному для каждой кнопки и при загрузке страницы (DOMContentLoaded). Метод addEventListener() устанавливает функцию, которая будет вызываться при наступлении события. Кнопка "Усыновить" потребовала наибольшего внимания. Создав переменную для кнопки и объявив ее с помощью document.getElementById(), я начал создавать свой слушатель событий. Первоначально я поместил все свои переменные и функции в область видимости слушателя событий. Но рефакторинг - это имя игры, и в итоге я перенес его содержимое в новую функцию, которая затем использовалась в качестве обратного вызова.

Наличие хорошо названных переменных важно для отслеживания их назначения. Эти переменные в функции handleAdoptBtn() меняют свои значения при нажатии кнопок "Meow" и "Like". После присвоения значений новым переменным они интерполируются в новый <div> savedContainer и присваиваются вновь созданным HTML-элементам.

Заключительные размышления

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

Будьте здоровы!