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

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

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

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

Вот кнопки с кошачьей тематикой.
Вот кнопки с кошачьей тематикой.

Рефакторинг

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

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

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

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

Предварительный рефакторинг
Предварительный рефакторинг
Пост-рефакторинг с содержимым/переменными в отдельной функции.
Пост-рефакторинг с содержимым/переменными в отдельной функции.

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

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

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

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

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?

03.02.2023 09:34

Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому дизайну, а размер сборки просто крошечный.

LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу

03.02.2023 08:15

Увеличение подматриц на единицу - LeetCode

Переключение светлых/темных тем
Переключение светлых/темных тем

02.02.2023 09:04

В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно использовать для установки светлых/темных стилей и добавления интерактивных функций с помощью JavaScript. Следуйте инструкциям, и вы готовы к работе!

Отношения &quot;многие ко многим&quot; в Laravel с методами присоединения и отсоединения
Отношения &quot;многие ко многим&quot; в Laravel с методами присоединения и отсоединения

02.02.2023 07:39

Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой статье мы расскажем, как создавать и управлять отношениями "многие ко многим" в Laravel с помощью методов присоединения и отсоединения вместо...

В PHP
В PHP

02.02.2023 07:16

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

Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel

01.02.2023 11:27

Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку приложений, такие как маршрутизация, ORM (Object-Relational Mapping), шаблонизация и аутентификация. Laravel имеет архитектуру на основе...