Добро пожаловать во вторую часть моей серии проектов по программированию. Сегодня я собираюсь изучить кодовую часть моего проекта. Я собираюсь еще больше раскрыть подробности, произошедшие в течение прошлой недели. Функции массива, прослушиватели событий и запросы на выборку были одними из немногих концепций, использованных при создании.
const animeQuote = document.querySelector(".quotes-from-anime");
fetch("http://localhost:3000/animes")
.then((response) => response.json())
.then((data) => renderAnime(data))
.catch((error) => console.error("Error fetching Anime Data:", error));
В приведенном выше фрагменте кода я использовал метод fetch(URL), доступный в глобальной области видимости, который указывает веб-браузерам отправлять запрос на URL-адрес. Он вернет обещание, которое мы можем обработать, используя then() и catch(). Мы использовали then(), который далее вызывает функцию renderAnime.
li.addEventListener("click", (e) => {
fetch("http://localhost:3000/animes")
.then((response) => response.json())
.then((animes) => {
const animeData = animes.find((anime) => {
if (anime.anime === e.target.textContent) {
Затем я добавил прослушиватель событий в раскрывающееся меню с дальнейшими проверками, чтобы получить желаемый результат в зависимости от выбранной опции. Позже я также добавил события mouseenter и mouseleave в свой тег ‹img›, показанный на снимке экрана ниже, что изменит отображаемое изображение на другое изображение, принадлежащее конкретному аниме, из которого этот персонаж.
img.addEventListener("mouseenter", (e) => {
fetch("http://localhost:3000/characters")
.then((response) => response.json())
.then((characters) => { characters.find((character) => {
if ("http://127.0.0.1:5501/" + character.image === img.src)
{
document.getElementById("display-image").src = character.titleimage;
}
});
});
});
