Created
June 14, 2017 20:21
-
-
Save craigwendel/a0d70479a0dd8f311c57d8ef36ba1060 to your computer and use it in GitHub Desktop.
Customer Database
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Customer Database</title> | |
<link rel="stylesheet" href="styles.css"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<h1>Internal Company Directory</h1> | |
<div class="customers"> | |
<!-- Put Your Customers In Here --> | |
</div> | |
<script src="main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. Fetch your users data | |
// 2. Loop over the data | |
// 3. Display it in the `.customers` element | |
(function () { | |
'use strict'; | |
function fetchPerson(){ | |
fetch("https://randomuser.me/api/") | |
.then( function(response){ | |
return response.json() | |
}) | |
.then(function(json){ | |
console.log("data", json) | |
const image = json.results[0].picture.large; | |
const firstName = json.results[0].name.first; | |
const lastName = json.results[0].name.last; | |
const email = json.results[0].email; | |
const streetName = json.results[0].location.street; | |
const city = json.results[0].location.city; | |
const state = json.results[0].location.state; | |
const postalCode = json.results[0].location.postcode; | |
const phone = json.results[0].phone; | |
const blurredPhone = json.results[0].cell; | |
const html = ` | |
<div class="customers"> | |
<div class="customers-info"> | |
<div class="image"><img src="${image}"/></div> | |
<div id="full-name"> | |
${firstName} ${lastName} | |
</div> | |
<div class="details" id ="email">${email}</div> | |
<div class="details">${streetName}</div> | |
<div class="details"> | |
${city} ${state} ${postalCode} | |
</div> | |
<div class="details">${phone}</div> | |
<div class="blurred-phone">${blurredPhone}</div> | |
</div> | |
</div>` | |
document.querySelector(".customers").insertAdjacentHTML('afterbegin', html) | |
}) | |
} | |
for (var i = 1; i <= 12; i++) { | |
fetchPerson(i) | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
body { | |
margin: 0% 2%; | |
} | |
h1 { | |
text-align: center; | |
text-transform: uppercase; | |
font-family: Arial; | |
font-size: 2rem; | |
} | |
img { | |
width: 23vw; | |
} | |
.customers { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
align-content: space-between; | |
} | |
.customers-info { | |
display: flex; | |
flex-direction: column; | |
align-items : center; | |
flex-basis: 25%; | |
font-family: Arial; | |
font-size: 0.8rem; | |
color: grey; | |
text-transform: capitalize; | |
margin: 10% 0%; | |
} | |
.details { | |
margin: 1% 2%; | |
} | |
#email { | |
margin: 5% 0%; | |
text-transform: uppercase; | |
font-size: 0.8rem; | |
} | |
#full-name { | |
color: #000; | |
font-size: 1.15rem; | |
font-weight: 700; | |
text-decoration: underline green; | |
text-transform: uppercase; | |
margin: 3%; | |
} | |
.blurred-phone { | |
margin: 5% 0%; | |
color: transparent; | |
text-shadow: 0 0 3px green; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment