Created
June 14, 2017 20:08
-
-
Save craigwendel/2ef93ac9073a01296c7681e9741e797c 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){ | |
| 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 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> | |
| </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%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment