JacobGonz1993 · JacobGonz1993 · May 20, 2019
diff --git a/addressbook.css b/addressbook.css
@@ -0,0 +1,69 @@
+body {
+    background-color: lightgrey;
+    font-family: 'Raleway';
+}
+
+#container {
+    text-align: center;
+}
+
+#contacts {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+#listItem {
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    min-width: 50%;
+    max-width: 70%;
+    padding: 0.5rem;
+    margin: 1rem;
+    background-color: white;
+    border-radius: 5px;
+    min-height: 15rem;
+    text-transform: uppercase;
+}
+
+img {
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+#seeMoreButton {
+  color: #fff !important;
+  text-transform: uppercase;
+  background: #60a3bc;
+  width: 50%;
+  padding: 0.5rem;
+  margin: 5px auto;
+  border-radius: 50px;
+  display: inline-block;
+  border: none;
+}
+
+@media only screen and (max-width: 900px){
+    #contacts {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+@media only screen and (max-width: 750px){
+    #contacts {
+        grid-template-columns: 1fr 1fr;
+    }
+    #listItem {
+        min-width: 45%;
+    }
+}
+
+@media only screen and (max-width: 475px){
+    #contacts {
+        grid-template-columns: 1fr;
+    }
+
+    #listItem {
+        width: 35%;
+    }
+}
diff --git a/addressbook.html b/addressbook.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Address Book</title>
+    <link rel="stylesheet" href="addressbook.css">
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
+</head>
+<body>
+    <div id="container">
+        <ul id="contacts">
+
+        </ul>
+    </div>
+
+    <script src="addressbook.js"></script>
+</body>
+</html>
diff --git a/addressbook.js b/addressbook.js
@@ -0,0 +1,84 @@
+window.onload = function() {
+    get();
+};
+
+let newArray = null;
+function get() {
+    fetch("https://randomuser.me/api/?results=20")
+    .then(response => response.json())
+    .then(data => {
+        newArray = data.results;
+        console.log(newArray);
+
+        //list out all users by name
+        newArray.map(currentValue => {
+            //create <li> element
+            let createLi = document.createElement("li");
+
+            //adds id #listItem to each <li>
+            let createLi.id = "listItem";
+
+            //selects id #contacts on the <ul>
+            let contactList = document.getElementById("contacts");
+
+            //creates an <img> tag
+            let image = document.createElement("img");
+
+            //creates <button> element 
+            let button = document.createElement("button");
+
+            //creates text for each button
+            let buttonText = document.createTextNode("See More");
+
+            //adds text inside button
+            button.appendChild(buttonText);
+
+            //adds id #seeMoreButton to each button
+            button.id = "seeMoreButton";
+
+            //when button is clicked, adds a <p> element inside each <li>
+            let boolean = true;
+            button.addEventListener("click", (e) =>{
+                //prevents button from being clickable more than once
+                if (boolean == false){
+                    return;
+                }
+                boolean = false;
+                //creates <p> element
+                let ageText = document.createElement("p");
+
+                //adds id #moreInfoto each p
+                ageText.id = "moreInfo";
+
+                //creates text for each p from api
+                let age = document.createTextNode("Age: " + currentValue.dob.age);
+                let br = document.createElement("br");
+                let zip = document.createTextNode("Zip Code: " currentValue.location.postcode);          
+
+                //adds text to each p
+                ageText.appendChild(age);
+                ageText.appendChild(br);
+                ageText.appendChild(zip);
+
+                //adds p inside li
+                createLi.appendChild(ageText);
+            })
+
+            //adds the image url from api to <img>
+            image.src = currentValue.picture.large;
+
+            //adds img to li
+            createLi.appendChild(image);
+
+            //adds naes from api inside each li
+            createLi.appendChild(
+                document.createTextNode(currentValue.name.first + " " + currentValue.name.last);
+            );
+            //adds button inside li
+            createLi.appendChild(button);
+
+            //adds each li inside ul
+            contactList.append(createLi);
+        });
+    });
+}
diff --git a/app.js b/app.js
diff --git a/index.html b/index.html