Fetch User Profile Generator(运用fetch随机显示随机用户相关信息，colt喜欢的fetch四步骤)

index.html

<h1 class="title"> Random User Generator</h1>
<div class="user-profile">
	<img id="avatar" src="https://pbs.twimg.com/profile_images/743138182607175680/ZJzktgBk_400x400.jpg" />
    <div id="fullname">Jon Snow</div>
  <div id="username">
  	kingofnorth
  </div>
    <div class="description">
      <div>Email: <span id="email">jon@hotmail.com</span></div>
      <div>City: <span id="city">Winterfell</span></div>
  </div>
  <div class="footer">
    <button id="btn">Next User!</button>
 </div>
</div>

script.js

var url = "https://randomuser.me/api";
var fullnameDisp = document.querySelector("#fullname");
var avatar = document.querySelector("#avatar");
var username = document.querySelector("#username");
var city = document.querySelector("#city");
var email = document.querySelector("#email");

var btn = document.querySelector("#btn");
btn.addEventListener("click", function(){
 fetch(url)
  .then(handleErrors)
  .then(parseJSON)
  .then(updateProfile)
  .catch(displayErrors)
});

// all functions
function handleErrors(res){
  if(!res.ok){
    throw Error(res.status);
  }
  return res;
}

function parseJSON(res){
   return res.json().then(function(parsedData){
     return parsedData.results[0];
   });
 };

function updateProfile(data){
   var fullname = data.name.first + " " + data.name.last;
   fullnameDisp.innerText = fullname;
   avatar.src = data.picture.medium;
   username.innerText = data.login.username;
   city.innerText = data.location.city;
   email.innerText = data.email;
 }

function displayErrors(err){
  console.log("There is an client error!");
   console.log(err);
 }

starter-fetch-user-profile-generator.markdown

STARTER: Fetch User Profile Generator

simple and elegant profile inspired: https://dribbble.com/shots/1033074-User-Profile by @jofpin

A Pen by liuxiaomingskm on CodePen.

License.

style.css

/* CSS design originally by @jofpin, tweaked by Colt Steele */
@import url(https://fonts.googleapis.com/css?family=Raleway|Varela+Round|Coda);

body {
  background: #ecf0f1;
  padding: 2.23em;
}

.title {
  color: #2c3e50;
  font-family: "Coda", sans-serif;
  text-align: center;
}
.user-profile {
  margin: auto;
	width: 27em; 
  height: 11em;
  background: #fff;
  border-radius: .3em;
}

.user-profile  #fullname {
  margin: auto;
  margin-top: -4.40em;
  margin-left: 5.80em;
  color: #16a085;
  font-size: 1.53em;
  font-family: "Coda", sans-serif;
  font-weight: bold;
}

#username {
  margin: auto;
  display: inline-block;
  margin-left: 10.43em;
  color: #3498db;
  font-size: .87em;
  font-family: "varela round", sans-serif;
}

.user-profile > .description {
  margin: auto;
  margin-top: 1.35em;
  margin-right: 3em;
  width: 18em;
  color: #7f8c8d;
  font-size: .87em;
  font-family: "varela round", sans-serif;
}

.user-profile > img#avatar {
	padding: .7em;
  margin-left: .3em;
  margin-top: .3em;
  height: 6.23em;
  width: 6.23em;
  border-radius: 18em;
}


.footer {
	margin: 2em auto;
	height: 3.70em;
  background: #16a085;
  text-align: center;
  border-radius: 0 0 .3em .3em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.1s;
}

button {
  color: white;
  font-family: "Coda", sans-serif;
  text-align: center;
  font-size: 20px;
  background: none;
  outline: none;
  border: 0;
}

.footer:hover {
  background: #1abc9c;
}