diff --git a/index.html b/index.html index 3ab6615e..40f63728 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <title>Intro to AJAX Practice Tasks</title> - <script src="src/index.js" charset="utf-8"></script> + <!-- <script src="src/index.js" charset="utf-8"></script> --> </head> <body> <h1>Dog CEO</h1> @@ -24,6 +24,7 @@ <h1>Dog CEO</h1> <ul id="dog-breeds"> </ul> + <script src="src/index.js" charset="utf-8"></script> </body> </html> diff --git a/src/index.js b/src/index.js index 407dde1c..ccd66fdd 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,63 @@ -console.log('%c HI', 'color: firebrick') +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) + ) + }) + } + + 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() +})