Проект "Породы кошек"
Название моего проекта по породам кошек — ABC, что является аббревиатурой от About Breeds Cat. Проект About Breeds Cat — это одностраничное приложение (SPA), приложение, работающее на одной странице и не зависящее от перенаправления, перезагрузки или обновления данных.
Это приложение использует три основных языка программирования: HTML, CSS и JavaScript. Доступ к общедоступному cat API позволил мне получить данные о кошках и использовать эти данные для создания своего проекта.
Приложение, которое я хотел создать, должно было быть о кошках, потому что я люблю их и знаю, что все, кто увидит мой проект, будут счастливы.
Моей следующей целью было создать приложение, предоставляющее информацию о породах кошек. Каждая кошка милая и имеет разные характеры, но каждая порода имеет свой уникальный темперамент и генетическое заболевание. Мой проект показывает только породы кошек, поэтому моя последняя цель — привлечь внимание пользователей к породам кошек. Знание породы вашей кошки может помочь обнаружить генетические заболевания. Поэтому я призываю пользователей пройти тест ДНК своей кошки!
Вернемся к кодированию. Я хотел создать приложение со списками пород кошек, чтобы пользователи могли выбрать конкретную породу. Когда порода выбрана, на веб-странице появляется карточка с изображением и информацией об этой конкретной породе. Пользователи могут выбирать больше карточек пород и отображать их на веб-сайте, чтобы просматривать и выбирать понравившиеся, добавляя и удаляя.
Чтобы быть более конкретным, когда пользователи выбирают породу кошки из раскрывающегося списка. Выбранная порода появляется в виде карты на веб-странице, включая красивую картинку, описание, темперамент, продолжительность жизни и происхождение.
Я рассмотрю некоторые части моего проекта и объясню, как он был построен и как все работает.
HTML
HTML — это место, где я написал схему того, как мой сайт будет отображаться для пользователей.
Внутри моего index.html я создал свой заголовок, тело, раскрывающийся список и место для хранения моей коллекции карточек пород кошек, которые позже будут использоваться в JavaScript.
В раскрывающемся списке я выбираю элемент выбора, где пользователи могут просматривать списки пород и выбирать нужную породу, щелкая мышью. Я хотел, чтобы пользователи узнали о моей блестящей идее назвать мой проект ABC, поэтому я добавил элемент span для изменения цвета в CSS.
JavaScript
JavaScript был той частью, где я бросил себе больше всего вызов, потому что это место, где я могу общаться и командовать веб-страницами, какие действия выполнять. Я использовал три прослушивателя событий DOMContentLoaded, change и click.
Для DOMContentLoaded я использовал асинхронную функцию fetch, которая запускала HTTP-запрос к API-интерфейсу cat и получала данные информации о cat. Затем я повторил списки пород кошек, используя forEach.
Событие изменения было частью, где я боролся больше всего, было сложно сделать так, чтобы карточка появлялась, когда пользователь выбирал породу. Как показано ниже, для решения этой проблемы я использовал метод find.
Целевое значение должно быть равно элементу поиска, которым в моем коде является catObj.id. Когда это выполняется, информация отправляется внутри строковой интерполяции card.innerHTML. Эта карточка содержит информацию о породе кошек и будет console.log(found) отображаться на веб-сайте.
Для окончательного варианта JavaScript я добавил больше кода, который позволил сделать еще две вещи.
- При выборе нескольких пород на веб-сайте может появиться несколько карточек.
- Создана кнопка удаления, чтобы карточку можно было удалить при нажатии на кнопку.
Если вы хотите проверить это, вы можете посетить мой GitHub!
CSS
Одна из вещей, которые я люблю делать, это стиль и улучшение внешнего вида вещей. Перенести мои мысли на веб-страницу с помощью CSS оказалось сложнее, чем я ожидал. Изменение размера шрифта, отображение, отступы и добавление цвета к фону и тексту были тем, чего я ожидал, а запутанная часть заключалась в использовании правильного словаря в нужном месте.
Однако с помощью поиска в Google и YouTube я смог создать тот стиль, которым хотел быть.
Моя любимая часть заключается в том, что когда курсор мыши касается кнопки, он становится указателем и позволяет пользователям узнать, где его можно щелкнуть.
Продолжение следует…
Изучение интерфейсных языков программирования и создание моего проекта с их помощью было непростым делом, но я чувствую себя благодарным и горжусь!
Кодирование требует времени и усилий, но после того, как вы это сделаете, вы получите невероятное удовлетворение!
Изображение ниже — мой последний проект на данный момент. Я знаю, что этот проект можно улучшить, поэтому надеюсь, что в будущем я смогу вернуться и завершить его!
