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()
+})