From 42b6c3f0b64613ab2e65b75eaea8f239e1c55f3e Mon Sep 17 00:00:00 2001 From: Aaron Gonzalez Date: Sun, 19 May 2019 22:05:59 -0500 Subject: [PATCH] address book --- addressbook.css | 69 +++++++++++++++++++++++++++++++++++++++ addressbook.html | 20 ++++++++++++ addressbook.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++ app.js | 1 - index.html | 12 ------- 5 files changed, 173 insertions(+), 13 deletions(-) create mode 100644 addressbook.css create mode 100644 addressbook.html create mode 100644 addressbook.js delete mode 100644 app.js delete mode 100644 index.html diff --git a/addressbook.css b/addressbook.css new file mode 100644 index 0000000..0e49af8 --- /dev/null +++ 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%; + } +} \ No newline at end of file diff --git a/addressbook.html b/addressbook.html new file mode 100644 index 0000000..4e5920e --- /dev/null +++ b/addressbook.html @@ -0,0 +1,20 @@ + + + + + + + Address Book + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/addressbook.js b/addressbook.js new file mode 100644 index 0000000..546d876 --- /dev/null +++ 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
  • element + let createLi = document.createElement("li"); + + //adds id #listItem to each
  • + let createLi.id = "listItem"; + + //selects id #contacts on the