From 21004ab398c12c6a155ac04b1ea66e2864aeb0f5 Mon Sep 17 00:00:00 2001 From: cobylyates Date: Tue, 7 Jan 2020 15:19:59 -0700 Subject: [PATCH 1/5] Added UI Names API --- README.md | 1 + 1 file changed, 1 insertion(+) 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/) From c05114e57dea9ec605b5abbebf5fc8bfc0eb28a0 Mon Sep 17 00:00:00 2001 From: cobylyates Date: Tue, 7 Jan 2020 17:37:59 -0700 Subject: [PATCH 2/5] initial commit --- index.css | 288 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 26 +++++ index.js | 17 ++++ 3 files changed, 331 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..0a71a9b --- /dev/null +++ b/index.css @@ -0,0 +1,288 @@ +html { + font-family: 'Bangers', cursive; + color: white; + background-color: #232323; +} + +:root { + --red: #f00; + --redDark: #c00; + --blue: #3b4cca; + --yellow: #ffde00; + --gold: #b3a125; + --card: #494949; +} + +h3 { + margin: 0; + letter-spacing: 2px; + font-family: 'Barlow', sans-serif; +} + +h2, h1, li { + margin-top: 50px; + letter-spacing: 4px; +} + +p, li { + font-family: 'Barlow', sans-serif; +} + +/* NAVIGATION */ +.navbar { + display: block; + display: flex; + justify-content: flex-end; + position: fixed; + background-color: var(--blue); + top: 0; + left: 0; + width: 100%; + z-index: 10; + box-shadow: 0 5px 0 rgb(113, 124, 13); +} + +.navbar ul { + display: flex; + justify-content: flex-end; + margin: 0; + width: 100%; + +} + +.navbar ul :hover { + background-color: var(--redDark); + cursor: pointer; +} + +.navbar ul li { + list-style: none; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + font-size: 1rem; + height: 40px; + width: 10%; + margin-top: 0; +} + +/* HEADER */ +header { + height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 0; + text-align: center; +} + +/* COLOR CIRCLES */ +#types { + display: flex; + justify-content: space-around; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100%; +} + +#types ul { + padding: 0 10px; +} + +#types ul li:hover { + cursor: pointer; + color: #494949; +} + +#types ul li:active { + transform: scale(1.2); outline: none; +} + +#types ul li { + margin-top: 0; +} + +#types ul li { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.circle { + height: 20px; + width: 20px; + border-radius: 50px; + margin-bottom: 10px; +} + +#types ul li { + list-style-type: none; +} + +.request { + display: flex; + justify-content: center; + padding-bottom: 100px; + padding-top: 30px; +} + +#search { + background-color: rgba(66, 97, 235, 0.664); + border: none; + color: white; + padding: 20px; + border-radius: 10px; + cursor: pointer; +} + +/* MAIN / CARDS */ +main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-gap: 3rem; + row-gap: 7rem; + margin: 150px auto; + margin-bottom: 6rem; + max-width: 70%; +} + +.scene { + width: 100%; + max-width: 250px; + height: 350px; + margin: 40px 0; + perspective: 600px; + display: flex; + justify-content: center; +} + +.card { + width: 100%; + height: 100%; + transition: transform 1s; + transform-style: preserve-3d; + cursor: pointer; + position: relative; +} + +hr { + width: 80%; + border: 3px solid #232323; + border-radius: 5px; +} + + +.card img { + width: 80%; + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -80%); +} + +.card.is-flipped { + transform: rotateY(180deg); +} + +.card__face { + position: absolute; + width: 100%; + height: 100%; + text-align: center; + font-size: 30px; + backface-visibility: hidden; + border-radius: 5px; + background-color: var(--card); +} + +.card__face--front { + display: flex; + flex-direction: column; +} + +.card__face--front { + font-size: 20px; +} + +.card__face--back { + display: flex; + flex-direction: column; + font-size: 20px; + transform: rotateY(180deg); +} + +.picDivs { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; +} + +.btn { + background-color: var(--card); + background-image: url("../assets/images/add.png"); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: center; + background-size: 100px; + border: none; + border-radius: 5px; + font-family: 'Bangers', cursive; + font-size: 1.25rem; + color: white; + letter-spacing: 2px; +} + +.btn:hover { transform: scale(1.02); outline: none; cursor: pointer;} +.btn:active { transform: scale(1); outline: none; } + +/* TOAST */ +.toast { + display: flex; + justify-content: center; +} + +#snackbar { + visibility: hidden; + min-width: 250px; + background-color: rgb(168, 168, 168); + color: #fff; + text-align: center; + 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..560d6f0 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + Pokemon Cards + + + + +
+

People using uinames API

+
+ +
+ +
+ +
+ +
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..8086e10 --- /dev/null +++ b/index.js @@ -0,0 +1,17 @@ +function getPeople () { + fetch('https://uinames.com/api/?ext®ion=united states&amount=4') + .then((response) => { + console.log(response) + return response.json(); + }) + .then((myJson) => { + console.log(myJson); + }); +} + +let btn = document.querySelector("#button") +let mainArea = document.querySelector("#root") + +btn.addEventListener("click", () => { + // console.log(myJson) +}) \ No newline at end of file From 412d7a41ccffd6f659e2e8cd5180b8b0e68c4e5b Mon Sep 17 00:00:00 2001 From: cobylyates Date: Thu, 9 Jan 2020 10:24:27 -0700 Subject: [PATCH 3/5] initial commit --- index.css | 1 - index.html | 7 +++- index.js | 107 ++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 98 insertions(+), 17 deletions(-) diff --git a/index.css b/index.css index 0a71a9b..47d70a0 100644 --- a/index.css +++ b/index.css @@ -7,7 +7,6 @@ html { :root { --red: #f00; --redDark: #c00; - --blue: #3b4cca; --yellow: #ffde00; --gold: #b3a125; --card: #494949; diff --git a/index.html b/index.html index 560d6f0..bd166b9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Pokemon Cards + UINAMES API @@ -20,7 +20,10 @@

People using uinames API

+
+ +
    - + \ No newline at end of file diff --git a/index.js b/index.js index 8086e10..446b202 100644 --- a/index.js +++ b/index.js @@ -1,17 +1,96 @@ -function getPeople () { - fetch('https://uinames.com/api/?ext®ion=united states&amount=4') - .then((response) => { - console.log(response) - return response.json(); - }) - .then((myJson) => { - console.log(myJson); - }); +async function getAPIData(url) { + try { + const response = await fetch(url); + const data = await response.json(); + // console.log(data) + return data; + } catch (error) { + console.error(error); + } } -let btn = document.querySelector("#button") -let mainArea = document.querySelector("#root") +const theData = getAPIData('https://uinames.com/api/?ext®ion=united states&amount=10').then(data => { + let card = document.querySelector("#root") -btn.addEventListener("click", () => { - // console.log(myJson) -}) \ No newline at end of file + card.textContent = data[0].name + +}) + +// const ul = document.getElementById("userList"); +// let page = 1; + +// const url = `https://randomuser.me/api/?results=10&seed=uvu${page}`; + +// const nextBtn = document.getElementById("nextBtn"); + +// nextBtn.onclick = function() { +// ul.innerHTML = ""; +// page++; + +// console.log(url); +// console.log(url); + +// fetch(url + "&page=" + page) +// .then(resp => resp.json()) +// .then(data => { +// const users = data.results; + +// // users.forEach(user => { +// // console.log(user) +// // }); +// // or + +// users.map(user => { +// // console.log(user) + +// let img = createEl("img"), +// p = createEl("p"); +// li = createEl("li"); + +// img.src = user.picture.thumbnail; +// p.innerHTML = `${user.name.first} ${user.name.last}`; + +// li.appendChild(img); +// li.appendChild(p); + +// ul.appendChild(li); +// }); +// }); +// }; + +// let users = fetch(url); + +// users +// .then(function(resp) { +// return resp.json(); +// }) +// .then(function(data) { +// // console.log(data); + +// const users = data.results; + +// // users.forEach(user => { +// // console.log(user) +// // }); +// // or + +// users.map(user => { +// // console.log(user) + +// let img = createEl("img"), +// p = createEl("p"), +// li = createEl("li") + +// img.src = user.picture.thumbnail; +// p.innerHTML = `${user.name.first} ${user.name.last}`; + +// li.appendChild(img); +// li.appendChild(p); + +// ul.appendChild(li); +// }); +// }); + +// function createEl(el) { +// return document.createElement(el); +// } From a3e1e7f8cf1c297f1242040b6f7ec25f635835e0 Mon Sep 17 00:00:00 2001 From: Coby Yates Date: Thu, 9 Jan 2020 17:11:40 -0700 Subject: [PATCH 4/5] working rest api call, displays cards, adds to favorites, add new card all working --- index.css | 213 +++++------------------------------------------------ index.html | 14 ++-- index.js | 159 +++++++++++++++++++-------------------- 3 files changed, 99 insertions(+), 287 deletions(-) diff --git a/index.css b/index.css index 47d70a0..cadbd2b 100644 --- a/index.css +++ b/index.css @@ -4,240 +4,60 @@ html { background-color: #232323; } -:root { - --red: #f00; - --redDark: #c00; - --yellow: #ffde00; - --gold: #b3a125; - --card: #494949; -} - h3 { margin: 0; letter-spacing: 2px; font-family: 'Barlow', sans-serif; } -h2, h1, li { - margin-top: 50px; - letter-spacing: 4px; -} - p, li { font-family: 'Barlow', sans-serif; } -/* NAVIGATION */ -.navbar { - display: block; - display: flex; - justify-content: flex-end; - position: fixed; - background-color: var(--blue); - top: 0; - left: 0; - width: 100%; - z-index: 10; - box-shadow: 0 5px 0 rgb(113, 124, 13); -} - -.navbar ul { - display: flex; - justify-content: flex-end; - margin: 0; - width: 100%; - -} - -.navbar ul :hover { - background-color: var(--redDark); - cursor: pointer; -} - -.navbar ul li { - list-style: none; - display: flex; - align-items: center; - justify-content: center; - padding: 4px; - font-size: 1rem; - height: 40px; - width: 10%; - margin-top: 0; -} - /* HEADER */ header { - height: 300px; + height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; - margin-bottom: 0; text-align: center; } -/* COLOR CIRCLES */ -#types { - display: flex; - justify-content: space-around; - justify-content: center; - align-items: center; - flex-wrap: wrap; - width: 100%; -} - -#types ul { - padding: 0 10px; -} - -#types ul li:hover { - cursor: pointer; - color: #494949; -} - -#types ul li:active { - transform: scale(1.2); outline: none; -} - -#types ul li { - margin-top: 0; -} - -#types ul li { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.circle { - height: 20px; - width: 20px; - border-radius: 50px; - margin-bottom: 10px; -} - -#types ul li { - list-style-type: none; -} - -.request { - display: flex; - justify-content: center; - padding-bottom: 100px; - padding-top: 30px; -} - -#search { - background-color: rgba(66, 97, 235, 0.664); - border: none; - color: white; - padding: 20px; - border-radius: 10px; - cursor: pointer; -} - /* MAIN / CARDS */ main { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 3rem; row-gap: 7rem; - margin: 150px auto; + margin: 90px auto; margin-bottom: 6rem; max-width: 70%; } - -.scene { - width: 100%; - max-width: 250px; - height: 350px; - margin: 40px 0; - perspective: 600px; - display: flex; - justify-content: center; -} - -.card { - width: 100%; - height: 100%; - transition: transform 1s; - transform-style: preserve-3d; - cursor: pointer; - position: relative; -} - -hr { - width: 80%; - border: 3px solid #232323; - border-radius: 5px; -} - - -.card img { - width: 80%; - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -80%); -} - -.card.is-flipped { - transform: rotateY(180deg); -} - -.card__face { - position: absolute; - width: 100%; - height: 100%; - text-align: center; - font-size: 30px; - backface-visibility: hidden; - border-radius: 5px; - background-color: var(--card); -} -.card__face--front { - display: flex; - flex-direction: column; -} - -.card__face--front { - font-size: 20px; -} - -.card__face--back { - display: flex; - flex-direction: column; - font-size: 20px; - transform: rotateY(180deg); -} - -.picDivs { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 50px; +img { + border-radius: 10px; } .btn { - background-color: var(--card); - background-image: url("../assets/images/add.png"); - background-repeat: no-repeat; - background-position-x: center; - background-position-y: center; - background-size: 100px; border: none; border-radius: 5px; font-family: 'Bangers', cursive; font-size: 1.25rem; color: white; letter-spacing: 2px; + margin: 70px 20px; + background-color: #555; } -.btn:hover { transform: scale(1.02); outline: none; cursor: pointer;} -.btn:active { transform: scale(1); outline: none; } +button { + background-color: rgb(204, 73, 73); + border: none; + padding: 10px; + font-size: 1.25rem; + width: 250px; + color: white; +} /* TOAST */ .toast { @@ -248,9 +68,10 @@ hr { #snackbar { visibility: hidden; min-width: 250px; - background-color: rgb(168, 168, 168); + 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; diff --git a/index.html b/index.html index bd166b9..7e7dce2 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + UINAMES API @@ -14,16 +15,13 @@

    People using uinames API

    -
    - -
    - +
    +
    +

    +
    - -
    - -
      +
      \ No newline at end of file diff --git a/index.js b/index.js index 446b202..d641e49 100644 --- a/index.js +++ b/index.js @@ -2,95 +2,88 @@ async function getAPIData(url) { try { const response = await fetch(url); const data = await response.json(); - // console.log(data) return data; } catch (error) { console.error(error); } } -const theData = getAPIData('https://uinames.com/api/?ext®ion=united states&amount=10').then(data => { - let card = document.querySelector("#root") - - card.textContent = data[0].name - -}) - -// const ul = document.getElementById("userList"); -// let page = 1; - -// const url = `https://randomuser.me/api/?results=10&seed=uvu${page}`; - -// const nextBtn = document.getElementById("nextBtn"); - -// nextBtn.onclick = function() { -// ul.innerHTML = ""; -// page++; - -// console.log(url); -// console.log(url); - -// fetch(url + "&page=" + page) -// .then(resp => resp.json()) -// .then(data => { -// const users = data.results; - -// // users.forEach(user => { -// // console.log(user) -// // }); -// // or - -// users.map(user => { -// // console.log(user) - -// let img = createEl("img"), -// p = createEl("p"); -// li = createEl("li"); - -// img.src = user.picture.thumbnail; -// p.innerHTML = `${user.name.first} ${user.name.last}`; - -// li.appendChild(img); -// li.appendChild(p); - -// ul.appendChild(li); -// }); -// }); -// }; - -// let users = fetch(url); - -// users -// .then(function(resp) { -// return resp.json(); -// }) -// .then(function(data) { -// // console.log(data); - -// const users = data.results; - -// // users.forEach(user => { -// // console.log(user) -// // }); -// // or - -// users.map(user => { -// // console.log(user) - -// let img = createEl("img"), -// p = createEl("p"), -// li = createEl("li") - -// img.src = user.picture.thumbnail; -// p.innerHTML = `${user.name.first} ${user.name.last}`; +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; + } +} -// li.appendChild(img); -// li.appendChild(p); +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); + }); + addButton(); +}); + +function addButton() { + let btn = document.createElement("button"); + btn.setAttribute("class", "btn"); + btn.textContent = "ADD"; + mainArea.appendChild(btn); + + btn.addEventListener("click", function() { + populateDOM(NewPerson); + }); +} -// ul.appendChild(li); -// }); -// }); +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); + }) +} -// function createEl(el) { -// return document.createElement(el); -// } From d2ac29a2f25cc3f0a6b413321be3c41ccb7e15f5 Mon Sep 17 00:00:00 2001 From: Coby Yates Date: Thu, 9 Jan 2020 17:31:05 -0700 Subject: [PATCH 5/5] project requirements done --- index.css | 2 +- index.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index cadbd2b..3c2e569 100644 --- a/index.css +++ b/index.css @@ -54,7 +54,7 @@ button { background-color: rgb(204, 73, 73); border: none; padding: 10px; - font-size: 1.25rem; + font-size: 1.15rem; width: 250px; color: white; } diff --git a/index.js b/index.js index d641e49..a725b8e 100644 --- a/index.js +++ b/index.js @@ -20,6 +20,7 @@ class Person { } } + const NewPerson = new Person( "Kevin", "Hart", @@ -38,7 +39,7 @@ const theData = getAPIData( data.map(user => { populateDOM(user); }); - addButton(); + }); function addButton() { @@ -49,6 +50,7 @@ function addButton() { btn.addEventListener("click", function() { populateDOM(NewPerson); + window.scrollTo(0,document.body.scrollHeight); }); } @@ -87,3 +89,4 @@ function populateDOM(single_user) { }) } +addButton(); \ No newline at end of file