diff --git a/08week/AddressBook/Addy.css b/08week/AddressBook/Addy.css
new file mode 100644
index 000000000..e2b3e3a49
--- /dev/null
+++ b/08week/AddressBook/Addy.css
@@ -0,0 +1,55 @@
+
+body {
+ font-family: sans-serif;
+ margin: 5% 10%;
+
+}
+
+button {
+ padding: 5px 10px;
+background: #9ca9bf;
+ border-radius: 20px;
+ color: white;
+ font-size: 12px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ margin: 10px 0px;
+}
+
+
+
+img {
+height: 85px;
+ width: 85px;
+ border-radius: 50%;
+ margin-right: 20px;
+}
+
+ul {
+list-style-type: none;
+}
+
+li {
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
+.contact-image {
+ float: left;
+}
+
+.contact::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.contact {
+ margin: 40px 0px;
+}
+
+#contacts {
+ margin: 0px;
+ padding: 0px;
+}
diff --git a/08week/AddressBook/Addy.html b/08week/AddressBook/Addy.html
new file mode 100644
index 000000000..49e32c06a
--- /dev/null
+++ b/08week/AddressBook/Addy.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+ Address Book
+
+
+Address Book
+
+
+
+
+
+
\ No newline at end of file
diff --git a/08week/AddressBook/addy.js b/08week/AddressBook/addy.js
new file mode 100644
index 000000000..95b6dac44
--- /dev/null
+++ b/08week/AddressBook/addy.js
@@ -0,0 +1,53 @@
+let contactsArray;
+
+
+const getContacts = () => {
+ fetch("https://randomuser.me/api/?results=10")
+ .then((res) => res.json())
+ .then((users) => {
+ contactsArray = users.results;
+ displayContacts();
+ });
+}
+
+const displayContacts = () => {
+
+ const contactsList = document.getElementById("contacts");
+ contactsArray.map((user) => {
+ console.log(contactsArray[0]);
+ const li = document.createElement("li");
+ li.className = "contact";
+ const contactImg = document.createElement("img");
+ contactImg.className = "contact-image";
+ contactImg.src = user.picture.medium;
+ const text = document.createTextNode(
+ `${user.name.last}, ${user.name.first}`
+ );
+ text.className = "contact-name";
+
+ linebreak = document.createElement("br");
+ contactsList.append(li);
+ li.appendChild(contactImg);
+ li.appendChild(text);
+ li.appendChild(linebreak);
+
+ const button = document.createElement("button");
+ button.innerHTML = "more info";
+ button.onclick = function () {
+ const contactDetails = document.createTextNode(
+ ` ${user.cell}, ${user.phone}, ${(user.location.street.number,
+ user.location.street.name)}, ${user.location.city}, ${
+ user.location.state
+ }, ${user.location.postcode}`
+ );
+ contactDetails.className = "contact-details";
+ li.appendChild(linebreak);
+ li.appendChild(contactDetails);
+ };
+ li.appendChild(button);
+ });
+};
+
+window.onload = () => {
+ getContacts();
+};