Это подойдет. Теперь я знаю, что сравнение проектов может быть пугающим. Вы можете подумать: «Вау, это приложение выглядит намного лучше, чем мое». Но уверяю вас, дело не в том, сколько вы вложили в свой файл, а в том, чтобы выполнить все ваши требования. Имея это в виду, я планировал сделать это для первого этапа проекта Flatiron School, и хотя мне это удалось, я бы не сказал, что это идеально. То, что вы сейчас прочтете, — это мой мыслительный процесс, который я вспомнил, когда работал над этим проектом, о том, как я разрабатывал приложение, которое ищет альбомы и выводит список песен (в частности, дискографию TOMORROW X TOGETHER).
Давайте поговорим о фазе 1. Эта фаза фактически дала заслуживающие доверия примеры, которые, по моему мнению, идеально подходят для моего проекта в качестве эталонов. «GitHub Search App» был в значительной степени таким, каким я хотел видеть свой проект, приложением, которое могло бы искать и находить все, что вы искали, и отображать данные на карточке. Одно отличие, которое я понял, заключалось в том, что приложение GitHub Search использовало API, а мой проект использует файл db.json, что означает, что наши запросы GET будут извлекаться с разных структурированных URL-адресов. Где API-интерфейс приложения GitHub Search App отображает ключ «элементы», а мой db.json имеет ключ «альбомов», который уже вызывается в URL-адресе выборки, поэтому не было необходимости передавать данные определенному ключу, мне просто нужно передать данные функции.
Ссылаясь на «Извлечение по запросу с помощью форм», я смог сделать так, чтобы моя выборка получала входное значение поиска по идентификатору после использования события отправки. Сначала я хотел искать по названию названия, но для удобства добавил инструкции в index.html информацию об альбомах из базы данных. Таким образом, поиск альбомов будет быстрее.
Одна проблема, с которой я столкнулся, заключалась в использовании forEach. Ожидайте, что выборка не получит входное значение и не извлечет данные, в этом случае это была ошибка «data.forEach не является функцией». Чтобы решить эту проблему, мне пришлось инициализировать данные формы и рендеринг отдельно, чтобы одна выборка получала данные «id» для формы с использованием события DOMContentLoaded, а другая выборка получала данные, где forEach правильно используется для рендеринга заголовков и изображений с использованием инициализированная функция getAlbums(). Я столкнулся с «Видео: получение запросов» на этапе 1, и я пришел к такому решению, сделав первоначальный рендеринг и выборку для получения всех ресурсов альбома.
После решения проблемы рендеринг альбомов с использованием интерполяции строк оказался идеальным, мне просто нужен был другой прослушиватель событий, чтобы выполнить требования, поэтому я решил использовать событие щелчка. Редактируя базу данных, я сделал массив названий песен значением ключа, называемого треками. После создания кнопки и события щелчка данные для ключа ID были получены и переданы новой функции с именем renderTracks(). Эта функция требовала цикла for для добавления каждой дорожки альбома в список песен, и с помощью некоторой интерполяции строк innerHTML равномерно распределял песни. Это мне пришлось искать в переполнении стека, чтобы сделать так, чтобы список не появлялся более одного раза для каждого клика, поэтому я добавил {once: true} к событию клика.
Теперь, когда моя первоначальная идея воплотилась в жизнь, я решил добавить больше возможностей в свое приложение. Ссылаясь на лекцию «Создание простого приложения для лайков», я добавил еще одно событие клика, чтобы создать функциональность лайка в функции renderTracks(). В списке песен рядом с каждой песней есть символ пустого сердца. Функциональность симпатии в функции likeCallBack() использует оператор if else, который добавляет полное сердце после щелчка, щелкает снова, после чего полное сердце удаляется.
Я хотел добавить больше в свое приложение, поэтому я решил сделать еще один список. Сначала в новом списке должны были быть перечислены понравившиеся песни, но, к сожалению, я не мог этого сделать, потому что не мог понять, как копировать понравившиеся песни при нажатии на сердечко. Вместо этого я создал список, который может генерировать случайные песни из базы данных в зависимости от того, какой альбом вы выберете. В функции renderTracks() я использовал Math.random() для выбора случайного элемента в album.tracks и добавления песни в список «рекомендуемых песен».
Наконец, есть кнопка, которая переключает темный режим, но она встроена в элемент HTML и не является JavaScript .addEventListener(), поэтому она не будет оцениваться.
Как новичок, начинающий фазу 1, я могу, по крайней мере, быть счастлив, что сделал что-то, что работает с моими первоначальными идеями, и что я горжусь своими способностями исправлять ошибки, но мне еще нужно многому научиться, если я захочу. чтобы иметь возможность сделать более чистое приложение.
