Completed Practice DOM/Fetch Challenges

index.html

@@ -19,6 +19,29 @@ <h1>Dog CEO</h1>
       <option value="b">b</option>
       <option value="c">c</option>
       <option value="d">d</option>
+      <option value="e">e</option>
+      <option value="f">f</option>
+      <option value="g">g</option>
+      <option value="h">h</option>
+      <option value="i">i</option>
+      <option value="j">j</option>
+      <option value="k">k</option>
+      <option value="l">l</option>
+      <option value="m">m</option>
+      <option value="n">n</option>
+      <option value="o">o</option>
+      <option value="p">p</option>
+      <option value="q">q</option>
+      <option value="r">r</option>
+      <option value="s">s</option>
+      <option value="t">t</option>
+      <option value="u">u</option>
+      <option value="v">v</option>
+      <option value="w">w</option>
+      <option value="x">x</option>
+      <option value="y">y</option>
+      <option value="z">z</option>
+
     </select>
 
     <ul id="dog-breeds">

src/index.js

@@ -1 +1,63 @@
-console.log('%c HI', 'color: firebrick')
+document.addEventListener('DOMContentLoaded', function() {
+  const imgUrl = "https://dog.ceo/api/breeds/image/random/4";
+  const breedUrl = "https://dog.ceo/api/breeds/list/all";
+  let dogList = document.getElementById('dog-breeds')
+  let dogContainer = document.getElementById('dog-image-container')
+
+  function displayDogs() {
+    fetch(imgUrl)
+    .then(res => res.json())
+    .then(dogs => {
+      let dogPics = Object.entries(dogs.message)
+
+      dogPics.forEach(dog => {
+        let img = document.createElement('img')
+        img.src = dog[1]
+        img.style.height = '25em'
+        img.style.width = '25em'
+
+        dogContainer.appendChild(img)
+      })
+    })
+  }
+
+function displayBreedList() {
+  fetch(breedUrl)
+  .then(res => res.json())
+  .then(dogBreed => {
+    let dogObj = dogBreed.message
+    for(const dogBreed in dogObj){
+      let li = document.createElement('li')
+      li.innerText = dogBreed
+
+      dogList.appendChild(li)
+
+      li.addEventListener('click', () => {
+        li.style.color = 'green'
+      })
+
+        function sortBreeds() {
+          let select = document.getElementById('breed-dropdown')
+          select.addEventListener('change', () => {
+            dogList.innerText = ''
+            let letter = select.value
+
+            for(const dogBreed in dogObj) {
+              if(dogBreed[0] === letter) {
+                let li = document.createElement('li')
+                li.innerText = dogBreed
+                dogList.appendChild(li)
+                li.addEventListener('click', () => {
+                  li.style.color = 'green'
+              })
+            }
+          } 
+        })
+      }
+    } sortBreeds()
+  })
+}
+  displayBreedList()
+  displayDogs()
+})
+