Для моего первого проекта мне нужно было включить как минимум три прослушивателя событий и включить API. Услышав бесчисленное количество примеров кода, посвященных собакам и кошкам, моей первой мыслью было использовать API для собак или кошек с несколькими другими слушателями событий. Конечно, я также только несколько раз начинал программировать с чистого листа, и начинать с нуля все еще было пугающе. После того, как я начал вводить основы HTML и связываться с моими JS и CSS, я начал думать о том, как я хочу, чтобы мой базовый план выглядел. Прежде чем я это понял, у меня был простой h1 вверху с кнопкой «Дайте мне кота!». Важно отметить, что я определил многие из своих переменных в начале кода, чтобы они служили словарем для последующих функций. Это список объявлений переменных, которые я использовал вверху:
const catButton = document.querySelector("#cat-btn");
const imgContainerForCats = document.querySelector(".cat-container"); // <div class="cat-container>"
const dogButton = document.querySelector("#dog-btn");
const imgContainerForDogs = document.querySelector(".dog-container");
const bells= document.getElementById("wrestling-bells")
const catMeow= document.getElementById("cat-meow")
const puppyBark= document.getElementById("puppy-bark")
const header = document.querySelector("h1");
Я добавил прослушиватель событий для моего h1 вверху, заставив его менять цвета с помощью оператора switch, а затем нашел генератор случайных изображений кошек, чтобы использовать его в выборке с моим «Дай мне кота!» кнопка.
Этот код выглядел так:
catButton.addEventListener("click", (catButtonParameter) => {
fetch("https://aws.random.cat/meow")
.then((response) => response.json())
.then((catApiAfterJsonConversion) => {
const displayedImageForCats = document.createElement("img"); // <img />
displayedImageForCats.setAttribute("src", catApiAfterJsonConversion.file); // <img src="http:url" />
imgContainerForCats.innerHTML = "";
imgContainerForCats.appendChild(displayedImageForCats);
});
});
Хотя я был близок к техническому выполнению требований, сайт выглядел довольно сухим. Поэтому я решил изменить свой прослушиватель событий для моего h1, чтобы сделать его немного более динамичным; с помощью генератора случайных чисел, который может преобразовать эти числа в шестнадцатеричный формат и распознать их как разные цвета. Я использовал случайный колоризатор как для текста, так и для фона h1. Для этого кода я использовал:
header.addEventListener("click", function() {
let randomColorNumber = Math.floor(Math.random() * 16777215).toString(16);
let randomColor = `#${randomColorNumber}`;
header.style.color = randomColor;
let randomColorNumberTwo = Math.floor(Math.random() * 16777215).toString(16);
let randomColorTwo = `#${randomColorNumberTwo}`;
header.style.backgroundColor = randomColorTwo;
});
Я также добавил прослушиватель событий для загруженного содержимого DOM, чтобы появлялось всплывающее окно, объясняющее, как работает приложение. Это был простой прослушиватель событий;
document.addEventListener('DOMContentLoaded',() =>{
alert("Welcome to the Cute Animal Competition, where YOU are the judge that chooses the cuter picture!");
})
После этого я нашел API-интерфейс генератора случайных изображений собак, который появлялся на противоположной стороне страницы, когда вы нажимали «Дайте мне собаку!» кнопку, которую я установил на противоположной стороне кнопки моего кота. Слушатель событий кнопки собаки был похож на тот, который я использовал для кошек, просто обращаясь к другому API и используя другие переменные, которые я создал в HTML, а затем назначил в моем JavaScript:
dogButton.addEventListener("click", (dogButtonParameter) => {
fetch("https://dog.ceo/api/breeds/image/random")
.then((response) => response.json())
.then((dogApiAfterJsonConversion) => {
const displayedImageForDogs = document.createElement("img");
displayedImageForDogs.setAttribute(
"src",
dogApiAfterJsonConversion.message
);
imgContainerForDogs.innerHTML = "";
imgContainerForDogs.appendChild(displayedImageForDogs);
});
Все еще чувствуя, что ему не хватает какого-то чутья, я добавил фоновое изображение арены и поставил «VS» в середине того места, где должны были разместиться мои изображения кошек и собак. Это на самом деле заняло некоторое время с CSS и заставило меня оценить, что, хотя я не очень хорошо знаю CSS, это бесценно для того, чтобы веб-сайт выглядел так, как вы хотите. Наконец, я добавил звуки для кнопки «кошка» («мяу»), кнопки «собака» («гав»), а для строки h1 вверху она будет воспроизводить типичный для арены «динь-динь-динь!». Я добавил эти коды в конец соответствующих обработчиков событий;
bells.play(); catMeow.play(); puppyBark.play();
Хотя мне было удобно создавать элементы в моем HTML и ссылаться на них в Javascript, я понял, что было бы полезно создавать эти элементы в Javascript. Я экспериментировал с созданием счетчика «голосов» для собак, чтобы каждый раз, когда вы пропускаете кошку, счетчик увеличивался. Для создания этого элемента я использовал:
let dogVote = document.createElement(‘h3’);//to create a counter document.body.appendChild(dogVote);//to add to the page dogVote.innerText=parseInt(“0”);//to recognize 0 as a number
также, я добавил
dogVote.innerText ++;
моему прослушивателю событий для кошек, чтобы счетчик увеличивался на единицу каждый раз, когда вы заменяете изображение кошки новым. По сути, это теперь ведет «счет» того, сколько раз вы пропустили изображение кошки и дали очко собакам. Наконец, я использовал:
catVote.style.right=0
чтобы расположить его с правой стороны вместе с некоторыми другими встроенными css, чтобы расположить его там, где я этого хотел. Из того, что я видел в Интернете, я обнаружил, что разница между добавлением дочернего элемента и добавлением заключается в количестве целевых элементов, а также в их отношении к их родителю и телу. Наконец, я обнаружил, что для удаления дочернего элемента из вашего html с помощью javascript я мог бы использовать
node.removeChild(childIWantToRemove)
но этот метод зависит от того, как вы объявили своего ребенка и какому родителю он был назначен.
Я мог бы сделать гораздо больше, но пока мое приложение генерирует изображения собак и кошек с их собственными соответствующими звуками, пользователь выбирает то, которое ему больше нравится, затем меняет противоположное изображение, пока не найдет более симпатичное, и так далее.
