From e8a69f9c07f68ac7ceaedcce750dbbfc39fb5c24 Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 10:52:16 -0400 Subject: [PATCH 1/7] Fetch dog pictures --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3ab6615e..40f63728 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Intro to AJAX Practice Tasks - +

Dog CEO

@@ -24,6 +24,7 @@

Dog CEO

+ From 25902cf27bae1cbf3c38899bbf54ca2ce75b827b Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 11:30:27 -0400 Subject: [PATCH 2/7] Fetch dog bread and place on Dom --- src/index.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/index.js b/src/index.js index 407dde1c..9aff3369 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,59 @@ console.log('%c HI', 'color: firebrick') + +const imgUrl = "https://dog.ceo/api/breeds/image/random/4" +const breedUrl = "https://dog.ceo/api/breeds/list/all" + + + +function getAllDogPics() { + + fetch(imgUrl) + .then((response) => response.json()) + .then((dogData) => dogData.message.forEach(dogImage => dogRender(dogImage))) +} + +function dogRender(dogImage) { + const dogCard = document.getElementById("dog-image-container") + + const img = document.createElement("img") + img.src = dogImage + img.alt = "Doggie" + dogCard.appendChild(img) +} + +// fetch dog bred with breedUrl +// ??add creeds to page in ul +const dogBreed = document.getElementById("dog-breeds") + +function getDogBreed () { + + fetch(breedUrl) + .then((response) => response.json()) + .then((breedData) => { + const breadNames = Object.keys(breedData.message) + breadNames.forEach((breedDetail) => breedRender(breedDetail)) + }) +} +// Object.keys(breedData.message).forEach(breedDetail => breedRender(breedDetail)) + +///breadData.message is an object + +function breedRender (breedDetail) { + const dogBreed = document.getElementById("dog-breeds") + + const li = document.createElement("li") + li.textContent = breedDetail + dogBreed.appendChild(li) + + +} + + + +function initialize() { + getAllDogPics() + getDogBreed() + console.log("test") +} + +initialize() From 14a622718685433ee61be49ad3270828e17d48d2 Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 12:01:55 -0400 Subject: [PATCH 3/7] Add Eventlistener to change color of dog --- src/index.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index 9aff3369..ac150fd1 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,9 @@ console.log('%c HI', 'color: firebrick') const imgUrl = "https://dog.ceo/api/breeds/image/random/4" const breedUrl = "https://dog.ceo/api/breeds/list/all" - - - +const dogBreed = document.getElementById("dog-breeds") +const dogCard = document.getElementById("dog-image-container") +const doggo = document.querySelectorAll("li.doggo") function getAllDogPics() { fetch(imgUrl) @@ -13,7 +13,6 @@ function getAllDogPics() { } function dogRender(dogImage) { - const dogCard = document.getElementById("dog-image-container") const img = document.createElement("img") img.src = dogImage @@ -21,9 +20,6 @@ function dogRender(dogImage) { dogCard.appendChild(img) } -// fetch dog bred with breedUrl -// ??add creeds to page in ul -const dogBreed = document.getElementById("dog-breeds") function getDogBreed () { @@ -34,20 +30,26 @@ function getDogBreed () { breadNames.forEach((breedDetail) => breedRender(breedDetail)) }) } -// Object.keys(breedData.message).forEach(breedDetail => breedRender(breedDetail)) - -///breadData.message is an object function breedRender (breedDetail) { - const dogBreed = document.getElementById("dog-breeds") const li = document.createElement("li") li.textContent = breedDetail + li.classList.add("doggo") + li.addEventListener("click", () => { + li.style.color = "blue" + }) dogBreed.appendChild(li) - - } +// doggo.addEventListener("click", function () { +// li.style.color = "blue" +// }) + +//create function to handle click +// function handleClick(breadDetail) { +// console.log("Selected:" , breadDetail) +// } function initialize() { From b0249df52f1d35fef1fe79fd6ab1e42db4a1ca73 Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 14:50:28 -0400 Subject: [PATCH 4/7] Add filter to only display matching dog to letter --- src/index.js | 58 ++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index ac150fd1..4b341b29 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,13 @@ console.log('%c HI', 'color: firebrick') + const imgUrl = "https://dog.ceo/api/breeds/image/random/4" const breedUrl = "https://dog.ceo/api/breeds/list/all" const dogBreed = document.getElementById("dog-breeds") const dogCard = document.getElementById("dog-image-container") -const doggo = document.querySelectorAll("li.doggo") +// const doggo = document.querySelectorAll("li.doggo") +// const dogList = document.getElementsByClassName("doggo") + function getAllDogPics() { fetch(imgUrl) @@ -20,14 +23,16 @@ function dogRender(dogImage) { dogCard.appendChild(img) } - function getDogBreed () { fetch(breedUrl) .then((response) => response.json()) .then((breedData) => { - const breadNames = Object.keys(breedData.message) - breadNames.forEach((breedDetail) => breedRender(breedDetail)) + const breedNames = Object.keys(breedData.message) + console.log("before loop:", breedNames) + breedNames.forEach((breedDetail) => breedRender(breedDetail) + ) + console.log("outside of for Each:", breedNames) }) } @@ -42,20 +47,51 @@ function breedRender (breedDetail) { dogBreed.appendChild(li) } -// doggo.addEventListener("click", function () { -// li.style.color = "blue" -// }) +//filter breeds +// breedNames = array of data +//selects value from dropdown === matches all with match +// returns new array with just matching....filterMethod +// when change only show breed with that start with that letter +const dropDown = document.getElementById("breed-dropdown") +dropDown.addEventListener("click", () => { + + // assess click value... dropDown.value + let letter = dropDown.value; + console.log(letter) + // assign to const + + const dogList = document.getElementsByClassName("doggo") +//html collection + for(const dogLetter of dogList) + // go through array of dog names to those that match clicked value + if (dogLetter.textContent.startsWith(letter)) { + dogLetter.style.visibility = "visible"; + } else { + dogLetter.style.visibility = "hidden" + } + +// remove hidden class +// else +// add hidden class + + console.log(dogList) // return only matching... true value + // display back on Dom in list +}) -//create function to handle click -// function handleClick(breadDetail) { -// console.log("Selected:" , breadDetail) + + +// function filterDog() { +// let letter = dropDown.value; + // } function initialize() { + getAllDogPics() getDogBreed() console.log("test") + // filterDog() } -initialize() +document.addEventListener("DOMContentLoaded", initialize) From de9dfcbc605b83f752ea4a3853843de20cc58e69 Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 14:57:37 -0400 Subject: [PATCH 5/7] Removed comments and clean up space --- src/index.js | 42 ++++-------------------------------------- 1 file changed, 4 insertions(+), 38 deletions(-) diff --git a/src/index.js b/src/index.js index 4b341b29..b231e901 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,10 @@ -console.log('%c HI', 'color: firebrick') - const imgUrl = "https://dog.ceo/api/breeds/image/random/4" const breedUrl = "https://dog.ceo/api/breeds/list/all" const dogBreed = document.getElementById("dog-breeds") const dogCard = document.getElementById("dog-image-container") -// const doggo = document.querySelectorAll("li.doggo") -// const dogList = document.getElementsByClassName("doggo") +const dogList = document.getElementsByClassName("doggo") +const dropDown = document.getElementById("breed-dropdown") function getAllDogPics() { @@ -47,51 +45,19 @@ function breedRender (breedDetail) { dogBreed.appendChild(li) } -//filter breeds -// breedNames = array of data -//selects value from dropdown === matches all with match -// returns new array with just matching....filterMethod -// when change only show breed with that start with that letter -const dropDown = document.getElementById("breed-dropdown") dropDown.addEventListener("click", () => { - - // assess click value... dropDown.value let letter = dropDown.value; - console.log(letter) - // assign to const - const dogList = document.getElementsByClassName("doggo") -//html collection for(const dogLetter of dogList) - // go through array of dog names to those that match clicked value if (dogLetter.textContent.startsWith(letter)) { dogLetter.style.visibility = "visible"; } else { dogLetter.style.visibility = "hidden" } - -// remove hidden class -// else -// add hidden class - - console.log(dogList) // return only matching... true value - // display back on Dom in list -}) - - - -// function filterDog() { -// let letter = dropDown.value; - -// } - +}); function initialize() { - getAllDogPics() getDogBreed() - console.log("test") - // filterDog() } - -document.addEventListener("DOMContentLoaded", initialize) +initialize() From 2dbed51b2cfd1a9dbe08e56dc692f7e34be380ce Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 15:01:02 -0400 Subject: [PATCH 6/7] Changed dog breed style with display --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index b231e901..188190c8 100644 --- a/src/index.js +++ b/src/index.js @@ -50,9 +50,9 @@ dropDown.addEventListener("click", () => { for(const dogLetter of dogList) if (dogLetter.textContent.startsWith(letter)) { - dogLetter.style.visibility = "visible"; + dogLetter.style.display = "block"; } else { - dogLetter.style.visibility = "hidden" + dogLetter.style.display = "none" } }); From fc474180b0757a3d42201d4e7abba8128dd5021f Mon Sep 17 00:00:00 2001 From: Anthony Phillips Date: Tue, 21 May 2024 17:01:44 -0400 Subject: [PATCH 7/7] Added event listender and remove console logs --- src/index.js | 124 +++++++++++++++++++++++++-------------------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/src/index.js b/src/index.js index 188190c8..ccd66fdd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,63 +1,63 @@ - -const imgUrl = "https://dog.ceo/api/breeds/image/random/4" -const breedUrl = "https://dog.ceo/api/breeds/list/all" -const dogBreed = document.getElementById("dog-breeds") -const dogCard = document.getElementById("dog-image-container") -const dogList = document.getElementsByClassName("doggo") -const dropDown = document.getElementById("breed-dropdown") - -function getAllDogPics() { - - fetch(imgUrl) - .then((response) => response.json()) - .then((dogData) => dogData.message.forEach(dogImage => dogRender(dogImage))) -} - -function dogRender(dogImage) { - - const img = document.createElement("img") - img.src = dogImage - img.alt = "Doggie" - dogCard.appendChild(img) -} - -function getDogBreed () { - - fetch(breedUrl) - .then((response) => response.json()) - .then((breedData) => { - const breedNames = Object.keys(breedData.message) - console.log("before loop:", breedNames) - breedNames.forEach((breedDetail) => breedRender(breedDetail) - ) - console.log("outside of for Each:", breedNames) - }) -} - -function breedRender (breedDetail) { - - const li = document.createElement("li") - li.textContent = breedDetail - li.classList.add("doggo") - li.addEventListener("click", () => { - li.style.color = "blue" +document.addEventListener("DOMContentLoaded", () => { + + const imgUrl = "https://dog.ceo/api/breeds/image/random/4" + const breedUrl = "https://dog.ceo/api/breeds/list/all" + const dogBreed = document.getElementById("dog-breeds") + const dogCard = document.getElementById("dog-image-container") + const dogList = document.getElementsByClassName("doggo") + const dropDown = document.getElementById("breed-dropdown") + let breedNames + + function getAllDogPics() { + + fetch(imgUrl) + .then((response) => response.json()) + .then((dogData) => dogData.message.forEach(dogImage => dogRender(dogImage))) + } + + function dogRender(dogImage) { + + const img = document.createElement("img") + img.src = dogImage + img.alt = "Doggie" + dogCard.appendChild(img) + } + function getDogBreed () { + + fetch(breedUrl) + .then((response) => response.json()) + .then((breedData) => { + breedNames = Object.keys(breedData.message) + breedNames.forEach((breedDetail) => breedRender(breedDetail) + ) }) - dogBreed.appendChild(li) -} - -dropDown.addEventListener("click", () => { - let letter = dropDown.value; - - for(const dogLetter of dogList) - if (dogLetter.textContent.startsWith(letter)) { - dogLetter.style.display = "block"; - } else { - dogLetter.style.display = "none" - } -}); - -function initialize() { - getAllDogPics() - getDogBreed() -} -initialize() + } + + function breedRender (breedDetail) { + + const li = document.createElement("li") + li.textContent = breedDetail + li.classList.add("doggo") + li.addEventListener("click", () => { + li.style.color = "blue" + }) + dogBreed.appendChild(li) + } + + dropDown.addEventListener("click", () => { + let letter = dropDown.value; + + for(const dogLetter of dogList) + if (dogLetter.textContent.startsWith(letter)) { + dogLetter.style.display = "block"; + } else { + dogLetter.style.display = "none" + } + }); + + function initialize() { + getAllDogPics() + getDogBreed() + } + initialize() +})