diff --git a/README.md b/README.md
index 9cd079e..bdd34ab 100644
--- 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
new file mode 100644
index 0000000..3c2e569
--- /dev/null
+++ 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;}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7e7dce2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+ UINAMES API
+
+
+
+
+
+ People using uinames API
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..a725b8e
--- /dev/null
+++ 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®ion=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();
\ No newline at end of file