From fe18bd084c4a03d7d950cc7061755ad08cdc7994 Mon Sep 17 00:00:00 2001
From: Cayla Horsey <cayla.horsey@powerhrg.com>
Date: Tue, 21 May 2024 10:04:00 -0400
Subject: [PATCH 1/4] Pass first 3 challenges

---
 src/index.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 407dde1c..247f1743 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,62 @@
-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')
+
+
+
+
+  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]
+
+      dogContainer.appendChild(img)
+    })
+  })
+
+  fetch(breedUrl)
+  .then(res => res.json())
+  .then(dogBreed => {
+    let dogObj = dogBreed.message
+    for(const dog in dogObj){
+      let li = document.createElement('li')
+
+      li.innerText = dog
+      dogList.appendChild(li)
+
+      li.addEventListener('click', (e) => {
+        li.style.color = 'green'
+      })
+
+      // console.log(dog[0])
+
+      let select = document.getElementById('breed-dropdown')
+
+      select.addEventListener('change', (e) => {
+        dogList.innerText = ''
+        let letter = select.value
+
+        for(const dog in dogObj) {
+          if(dog[0] === letter) {
+            let li = document.createElement('li')
+            li.innerText = dog
+            dogList.appendChild(li)
+          }
+        } 
+      })
+
+      //Grab select ID
+      //Target value / letter
+      //If selection letter === dog[0]
+      //clear UL innerHTML
+      //Re-add for breeds whos dog[0] === selection letter
+    }
+  })
+})
+

From 82e44a2cc8ae5b062872b6782e010ee186e26320 Mon Sep 17 00:00:00 2001
From: Cayla Horsey <cayla.horsey@powerhrg.com>
Date: Tue, 21 May 2024 10:26:31 -0400
Subject: [PATCH 2/4] Add more drop down option

---
 index.html | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/index.html b/index.html
index 3ab6615e..5d41c102 100644
--- a/index.html
+++ b/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">

From 8f4ffe9504915efd13831154869fd8c12d8087db Mon Sep 17 00:00:00 2001
From: Cayla Horsey <cayla.horsey@powerhrg.com>
Date: Tue, 21 May 2024 10:26:46 -0400
Subject: [PATCH 3/4] Refactor code

---
 src/index.js | 80 ++++++++++++++++++++++++++--------------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/index.js b/src/index.js
index 247f1743..f0cf79ff 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,59 +4,59 @@ document.addEventListener('DOMContentLoaded', function() {
   let dogList = document.getElementById('dog-breeds')
   let dogContainer = document.getElementById('dog-image-container')
 
-
-
-
-  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]
-
-      dogContainer.appendChild(img)
+  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]
+  
+        dogContainer.appendChild(img)
+      })
     })
-  })
+  }
 
+function displayBreedList() {
   fetch(breedUrl)
   .then(res => res.json())
   .then(dogBreed => {
     let dogObj = dogBreed.message
-    for(const dog in dogObj){
+    for(const dogBreed in dogObj){
       let li = document.createElement('li')
 
-      li.innerText = dog
+      li.innerText = dogBreed
       dogList.appendChild(li)
 
-      li.addEventListener('click', (e) => {
+      li.addEventListener('click', () => {
         li.style.color = 'green'
       })
 
-      // console.log(dog[0])
-
-      let select = document.getElementById('breed-dropdown')
-
-      select.addEventListener('change', (e) => {
-        dogList.innerText = ''
-        let letter = select.value
-
-        for(const dog in dogObj) {
-          if(dog[0] === letter) {
-            let li = document.createElement('li')
-            li.innerText = dog
-            dogList.appendChild(li)
-          }
-        } 
-      })
-
-      //Grab select ID
-      //Target value / letter
-      //If selection letter === dog[0]
-      //clear UL innerHTML
-      //Re-add for breeds whos dog[0] === selection letter
-    }
+        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()
 })
 

From f56865ef059f7742f539bc41f7433083b6a3e1e1 Mon Sep 17 00:00:00 2001
From: Cayla Horsey <cayla.horsey@powerhrg.com>
Date: Tue, 21 May 2024 10:31:31 -0400
Subject: [PATCH 4/4] Change img size

---
 src/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index f0cf79ff..755f9563 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,9 @@ document.addEventListener('DOMContentLoaded', function() {
       dogPics.forEach(dog => {
         let img = document.createElement('img')
         img.src = dog[1]
-  
+        img.style.height = '25em'
+        img.style.width = '25em'
+
         dogContainer.appendChild(img)
       })
     })
@@ -26,8 +28,8 @@ function displayBreedList() {
     let dogObj = dogBreed.message
     for(const dogBreed in dogObj){
       let li = document.createElement('li')
-
       li.innerText = dogBreed
+      
       dogList.appendChild(li)
 
       li.addEventListener('click', () => {
@@ -55,7 +57,6 @@ function displayBreedList() {
     } sortBreeds()
   })
 }
-
   displayBreedList()
   displayDogs()
 })