From a97e5718955b30dc2562045c111a755a63581873 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 21 May 2024 11:51:27 -0400 Subject: [PATCH 1/2] added dog images, list, and color changing event listener --- src/index.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/index.js b/src/index.js index 407dde1c..61a88aeb 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,52 @@ console.log('%c HI', 'color: firebrick') + +const dogBreedList = document.getElementById('dog-breeds') +const dogImages = document.getElementById('dog-image-container') +const dropDownOptions = document.querySelectorAll('option') + +const addBreedClickListener = (breed) => { + document.getElementById(`${breed}`).addEventListener('click', () => { + document.getElementById(`${breed}`).style.color = 'pink' + }) +} + +const grabImages = () => { + fetch("https://dog.ceo/api/breeds/image/random/4") + .then(resp => resp.json()) + .then(data => { + data.message.forEach(dog => { + const createImage = document.createElement('img') + dogImages.appendChild(createImage).src = `${dog}` + }) + }) +} + +const grabBreeds = () => { + fetch("https://dog.ceo/api/breeds/list/all") + .then(resp => resp.json()) + .then(data => { + Object.keys(data.message).forEach(breed => { + const createListItem = document.createElement('li') + createListItem.id = `${breed}` + dogBreedList.appendChild(createListItem).textContent = breed + addBreedClickListener(breed) + }) + }) + } + + +grabImages() +grabBreeds() + +const listenerForOptions = () => { + dropDownOptions.forEach(option => { + option.addEventListener('click',() => { + grabBreeds() + + } ) + }) +} + +listenerForOptions() + + From 3c9def3e3f556d59f24769b02d9561d6bf3088d9 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Tue, 21 May 2024 13:29:26 -0400 Subject: [PATCH 2/2] add search feature for dog list and 'defer' to script tag in html --- index.html | 2 +- src/index.js | 24 +++++++++++++++--------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 3ab6615e..eca716ca 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Intro to AJAX Practice Tasks - +

Dog CEO

diff --git a/src/index.js b/src/index.js index 61a88aeb..d3ecd111 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,9 @@ console.log('%c HI', 'color: firebrick') - +let dogsList const dogBreedList = document.getElementById('dog-breeds') const dogImages = document.getElementById('dog-image-container') const dropDownOptions = document.querySelectorAll('option') +const breedDropDown = document.getElementById('breed-dropdown') const addBreedClickListener = (breed) => { document.getElementById(`${breed}`).addEventListener('click', () => { @@ -24,6 +25,10 @@ const grabImages = () => { const grabBreeds = () => { fetch("https://dog.ceo/api/breeds/list/all") .then(resp => resp.json()) + .then(data => { + dogsList = data.message + return data + }) .then(data => { Object.keys(data.message).forEach(breed => { const createListItem = document.createElement('li') @@ -38,15 +43,16 @@ const grabBreeds = () => { grabImages() grabBreeds() -const listenerForOptions = () => { - dropDownOptions.forEach(option => { - option.addEventListener('click',() => { - grabBreeds() - - } ) - }) + +breedDropDown.onchange = () => { + const filteredDogsList = Object.keys(dogsList).filter(dog => dog.startsWith(breedDropDown.value)) + dogBreedList.innerHTML = '' + filteredDogsList.forEach(breed => { + const createListItem = document.createElement('li') + createListItem.id = `${breed}` + dogBreedList.appendChild(createListItem).textContent = breed + addBreedClickListener(breed)}) } -listenerForOptions()