DGM3780 · CobyYates · Jan 7, 2020 · Jan 8, 2020 · Jan 9, 2020 · Jan 10, 2020
diff --git a/README.md b/README.md
@@ -55,3 +55,4 @@ In this assignment, we will be creating a simple webpage/web app that will displ
 - [The Twitter API](https://developer.twitter.com/en/docs)
 - [The YouTube API](https://developers.google.com/youtube/)
 - [Worldwide Holidays API](https://calendarific.com/api-documentation)
+- [UI Names API](https://uinames.com/)
diff --git a/index.css b/index.css
@@ -0,0 +1,108 @@
+html {
+  font-family: 'Bangers', cursive;  
+  color: white;
+  background-color: #232323;
+}
+
+h3 {
+  margin: 0;
+  letter-spacing: 2px;
+  font-family: 'Barlow', sans-serif;
+}
+
+p, li {
+  font-family: 'Barlow', sans-serif;
+}
+
+/* HEADER */
+header {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+/* MAIN / CARDS */
+main {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 3rem;
+  row-gap: 7rem;
+  margin: 90px auto;
+  margin-bottom: 6rem;
+  max-width: 70%;
+}
+
+img {
+  border-radius: 10px;
+}
+
+.btn {
+  border: none;
+  border-radius: 5px;
+  font-family: 'Bangers', cursive;
+  font-size: 1.25rem;  
+  color: white;
+  letter-spacing: 2px;
+  margin: 70px 20px;
+  background-color: #555;
+}
+
+button {
+  background-color: rgb(204, 73, 73);
+  border: none;
+  padding: 10px;
+  font-size: 1.15rem;
+  width: 250px;
+  color: white;
+}
+
+/* TOAST */
+.toast {
+  display: flex;
+  justify-content: center;
+}
+
+#snackbar {
+  visibility: hidden; 
+  min-width: 250px; 
+  background-color: rgb(204, 73, 73); 
+  color: #fff; 
+  text-align: center;
+  font-size: 1.25rem;
+  border-radius: 4px 4px 0 0; 
+  padding: 16px;
+  position: fixed; 
+  z-index: 1; 
+  display: flex;
+  justify-content: center;
+  bottom: 30px;
+}
+
+#snackbar.show {
+  visibility: visible; 
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!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" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
+    <link rel="stylesheet" href="index.css" />
+    <title>UINAMES API</title>
+  </head>
+  <body>
+    <nav class="navbar"></nav>
+
+    <header>
+      <h1>People using uinames API</h1>
+    </header>
+
+    <div class="toast">
+      <div id="snackbar" class="sBar1">
+        <h2 class="sBText"></h2>
+      </div>
+    </div>
+
+    <main></main>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,92 @@
+async function getAPIData(url) {
+  try {
+    const response = await fetch(url);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+class Person {
+  constructor(name, surname, email, age, phone, birthday, photo) {
+    this.name = name;
+    this.surname = surname;
+    this.email = email;
+    this.age = age;
+    this.phone = phone;
+    this.birthday = birthday;
+    this.photo = photo;
+  }
+}
+
+
+const NewPerson = new Person(
+  "Kevin",
+  "Hart",
+  "kevin.hart@comedy.com",
+  40,
+  "(123) 456 7890",
+  { mdy: "06/19/1987" },
+  "https://media.todaybirthdays.com/upload/2015/11/29/kevin-hart.jpg"
+);
+
+let mainArea = document.querySelector("main");
+
+const theData = getAPIData(
+  `https://uinames.com/api/?ext&region=united states&amount=15`
+).then(data => {
+  data.map(user => {
+    populateDOM(user);
+  });
+
+});
+
+function addButton() {
+  let btn = document.createElement("button");
+  btn.setAttribute("class", "btn");
+  btn.textContent = "ADD";
+  mainArea.appendChild(btn);
+
+  btn.addEventListener("click", function() {
+    populateDOM(NewPerson);
+    window.scrollTo(0,document.body.scrollHeight);
+  });
+}
+
+function populateDOM(single_user) {
+  let card = document.createElement("div"),
+    name = document.createElement("p"),
+    email = document.createElement("p"),
+    age = document.createElement("p"),
+    phone = document.createElement("p"),
+    img = document.createElement("img"),
+    add = document.createElement("button")
+
+  name.textContent = `Name: ${single_user.name} ${single_user.surname}`;
+  email.textContent = `Email: ${single_user.email}`;
+  age.textContent = `Age: ${single_user.age}`;
+  phone.textContent = `Phone: ${single_user.phone}`;
+  add.textContent = `Add ${single_user.name} to Favorites`
+  img.src = single_user.photo;
+
+  card.appendChild(img);
+  card.appendChild(name);
+  card.appendChild(age);
+  card.appendChild(phone);
+  card.appendChild(email);
+  card.appendChild(add);
+  mainArea.appendChild(card);
+
+  add.addEventListener("click", function() {
+    var x = document.querySelector(".sBar1");
+    x.textContent = `${single_user.name} added`
+    // x.className = "show";
+    x.classList.toggle("show")
+    setTimeout(function() {
+      x.classList.toggle("show")
+    }, 3000);
+  })
+}
+
+addButton();