learn-co-students · Haloren · Sep 11, 2020
diff --git a/.learn b/.learn
@@ -1,4 +1,4 @@
-tags:
-- unknown
-languages:
-- javascript
+tags:
+- unknown
+languages:
+- javascript
diff --git a/README.md b/README.md
@@ -1,57 +1,57 @@
-# Fetch Dog CEO Challenge
-
-## Challenge 1
-
-This repository includes an `index.html` file that loads an `index.js` file.
-
-```js
-const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
-```
-
-Add JavaScript so that:
-
-- on page load
-- fetch the images using the url above ⬆️
-- parse the response as `JSON`
-- add image elements to the DOM **for each**🤔 image in the array
-
----
-
-## Challenge 2
-
-```js
-const breedUrl = 'https://dog.ceo/api/breeds/list/all'
-```
-
-After the first challenge is completed, add JavaScript so that:
-
-- on page load, fetch all the dog breeds using the url above ⬆️
-- add the breeds to the page in an `<ul>` (take a look at the included `index.html`)
-
----
-
-## Challenge 3
-
-Once all of the breeds are rendered in the `<ul>`, add JavaScript so that the
-font color of a particular `<li>` changes _on click_. This can be a color of
-your choosing.
-
-When the user clicks any of the dog breed list items, the color the text should
-change.
-
----
-
-## Challenge 4
-
-Once we are able to load _all_ of the dog breeds onto the page, add JavaScript
-so that the user can filter breeds that start with a particular letter using a
-dropdown.
-
-For example, if the user selects 'a' in the dropdown, only show the breeds with
-names that start with the letter a. For simplicity, the dropdown only includes
-the letters a-d. However, we can imagine expanding this to include the entire
-alphabet
-
----
-
-![dog ceo](https://dog.ceo/img/dog.jpg)
+# Fetch Dog CEO Challenge
+
+## Challenge 1
+
+This repository includes an `index.html` file that loads an `index.js` file.
+
+```js
+const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
+```
+
+Add JavaScript so that:
+
+- on page load
+- fetch the images using the url above ⬆️
+- parse the response as `JSON`
+- add image elements to the DOM **for each**🤔 image in the array
+
+---
+
+## Challenge 2
+
+```js
+const breedUrl = 'https://dog.ceo/api/breeds/list/all'
+```
+
+After the first challenge is completed, add JavaScript so that:
+
+- on page load, fetch all the dog breeds using the url above ⬆️
+- add the breeds to the page in an `<ul>` (take a look at the included `index.html`)
+
+---
+
+## Challenge 3
+
+Once all of the breeds are rendered in the `<ul>`, add JavaScript so that the
+font color of a particular `<li>` changes _on click_. This can be a color of
+your choosing.
+
+When the user clicks any of the dog breed list items, the color the text should
+change.
+
+---
+
+## Challenge 4
+
+Once we are able to load _all_ of the dog breeds onto the page, add JavaScript
+so that the user can filter breeds that start with a particular letter using a
+dropdown.
+
+For example, if the user selects 'a' in the dropdown, only show the breeds with
+names that start with the letter a. For simplicity, the dropdown only includes
+the letters a-d. However, we can imagine expanding this to include the entire
+alphabet
+
+---
+
+![dog ceo](https://dog.ceo/img/dog.jpg)
diff --git a/index.html b/index.html
@@ -1,29 +1,29 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <title>Intro to AJAX Practice Tasks</title>
-    <script src="src/index.js" charset="utf-8"></script>
-  </head>
-  <body>
-    <h1>Dog CEO</h1>
-
-    <div id="dog-image-container">
-      <!-- images here -->
-    </div>
-
-    <hr>
-    <label for="select-breed">Filter Breeds That Start with:</label>
-    <select id="breed-dropdown" name="select-breed">
-      <option value="a">a</option>
-      <option value="b">b</option>
-      <option value="c">c</option>
-      <option value="d">d</option>
-    </select>
-
-    <ul id="dog-breeds">
-
-    </ul>
-
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Intro to AJAX Practice Tasks</title>
+    <script src="src/index.js" charset="utf-8"></script>
+  </head>
+  <body>
+    <h1>Dog CEO</h1>
+
+    <div id="dog-image-container">
+      <!-- images here -->
+    </div>
+
+    <hr>
+    <label for="select-breed">Filter Breeds That Start with:</label>
+    <select id="breed-dropdown" name="select-breed">
+      <option value="a">a</option>
+      <option value="b">b</option>
+      <option value="c">c</option>
+      <option value="d">d</option>
+    </select>
+
+    <ul id="dog-breeds">
+
+    </ul>
+
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1 +1,79 @@
-console.log('%c HI', 'color: firebrick')
+console.log('%c HI', 'color: firebrick')
+// fetch images from imgUrl
+//parse response as JSON
+const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
+
+function fetchImages(){
+    fetch(imgUrl)
+    .then(resp => resp.json())
+    // .then(json => console.log(json)); 
+    .then(json => renderImages(json));
+}
+
+//add image elements to the DOM for each image in the array
+//<div id="dog-image-container">
+function renderImages(images) {
+    const imageContainer = document.querySelector('#dog-image-container')
+
+    for (let i = 0; i < images.message.length; i++) {
+        let image = document.createElement('img');
+        image.src = images['message'][i];
+        imageContainer.appendChild(image);
+    }
+
+}
+
+
+// fetch breeds from breedUrl
+const breedUrl = "https://dog.ceo/api/breeds/list/all"
+let allBreeds = []
+
+function fetchBreeds() {
+    fetch(breedUrl)
+    .then((response) => {
+        return response.json();
+    })
+    .then((data) => {
+        // console.log(data); // object hash key= data.message
+        Object.keys(data.message).forEach(breed => {
+            allBreeds.push(breed);
+            addBreeds(breed)
+        })
+    })
+}
+// add breeds to page <ul id="dog-breeds">
+function addBreeds(breed) {
+    const ul = document.querySelector("#dog-breeds");
+    let li = document.createElement('li');
+    li.innerHTML = breed;
+    ul.appendChild(li);
+    // <li> breed font color changes on click
+    li.addEventListener("click", function(){
+        li.style.color = '#EEC2FF';
+    });
+
+}
+
+
+// breeds drop down filter by letter (remove ul and recreate)
+// <select id="breed-dropdown" name="select-breed">
+function filterBreeds() {
+    const ul = document.querySelector("#dog-breeds");
+    let filter = document.querySelector("#breed-dropdown");
+    filter.addEventListener('change', function(e) {
+        ul.remove();
+        newList = document.createElement('ul') // new ul (ul parent is <body>)
+        newList.id = "dog-breeds";
+        document.querySelector('body').appendChild(newList);
+        let filterLetter = e.target.value;
+        console.log(allBreeds);
+        newBreedsList = allBreeds.filter(breed => breed.startsWith(filterLetter));
+        newBreedsList.forEach(breed => addBreeds(breed));
+    })
+} //works for the first filter, but then adds to the existing filter but doesn't clear the first filter?
+
+document.addEventListener('DOMContentLoaded', function() {
+    fetchImages()
+    fetchBreeds()
+    filterBreeds()
+})