diff --git a/index.html b/index.html
index 3ab6615..99e0d47 100644
--- a/index.html
+++ b/index.html
@@ -25,5 +25,7 @@ <h1>Dog CEO</h1>
 
     </ul>
 
+   
+
   </body>
-</html>
+</html
diff --git a/src/index.js b/src/index.js
index 407dde1..22f8568 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,76 @@
 console.log('%c HI', 'color: firebrick')
+
+let Breed = [];
+
+document.addEventListener('DOMContentLoaded', function () {
+    loadImages();
+    loadBreedOptions();
+  });
+
+  function loadImages() {
+    const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
+    fetch(imgUrl)
+      .then(res=> res.json())
+      .then(results => {
+        results.message.forEach(image => addImage(image))
+      });
+  }
+
+
+  function addImage(dogPicUrl) {
+    let container = document.querySelector('#dog-image-container');
+    let newImageEl = document.createElement('img');
+    newImageEl.src = dogPicUrl;
+    container.appendChild(newImageEl);
+  }
+
+  function loadBreedOptions() {
+    const breedUrl = 'https://dog.ceo/api/breeds/list/all'
+    fetch(breedUrl)
+      .then(res => res.json())
+      .then(results => {
+  
+        breeds = Object.keys(results.message);
+        updateBreedList(breeds);
+        addBreedSelectListener();
+      });
+  }
+
+  
+function updateBreedList(breeds) {
+    let ul = document.querySelector('#dog-breeds');
+    removeChildren(ul);
+    breeds.forEach(breed => addBreed(breed));
+  }
+  
+  function removeChildren(element) {
+    let child = element.lastElementChild;
+    while (child) {
+      element.removeChild(child);
+      child = element.lastElementChild;
+    }
+  }
+  
+  function selectBreedsStartingWith(letter) {
+    updateBreedList(breeds.filter(breed => breed.startsWith(letter)));
+  }
+  
+  function addBreedSelectListener() {
+    let breedDropdown = document.querySelector('#breed-dropdown');
+    breedDropdown.addEventListener('change', function (event) {
+      selectBreedsStartingWith(event.target.value);
+    });
+  }
+  
+  function addBreed(breed) {
+    let ul = document.querySelector('#dog-breeds');
+    let li = document.createElement('li');
+    li.innerText = breed;
+    li.style.cursor = 'pointer';
+    ul.appendChild(li);
+    li.addEventListener('click', updateColor);
+  }
+  
+  function updateColor(event) {
+    event.target.style.color = 'palevioletred';
+  }
\ No newline at end of file