<div class="grid">
  <div class="fetch-repo">
    <h2>Fetch Chris&rsquo;s repositories</h2>
  </div>

  <div class="fetch-non-existent-repo">
    <h2>Fetch non-existant Github repo</h2>
  </div>
  
  <div class="ps">
    <p>PS: refresh enough times and you'll eventually see a rate-limit error in both columns :)</p>
    <p>PPS: This demo uses grid, so view in on a Grid enabled browser :)</p>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.25em;
}

.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-column-gap: 1em;
  grid-row-gap: 2em;
  max-width: 1040px; 
  margin: 0 auto;
  padding: 0 1em;
}

.ps {
  grid-column: 1 / span 2;
  text-align: center;
}

.is-error {
  color: red;
}

p {
  margin: 0;
}

p + p {
  margin-top : 0.25em;
}

// Fetch Chris's repo
let fetchRepoDiv = document.querySelector('.fetch-repo')
zlFetch('https://api.github.com/users/chriscoyier/repos')
  .then(data => listRepos(fetchRepoDiv, data))
  .catch(error => {
    writeError(fetchRepoDiv, error)
  })

// Fetch nonexistent repo
let nonexistentDiv = document.querySelector('.fetch-non-existent-repo')
zlFetch('https://api.github.com/users/chrissycoyier/repos')
  .then(data => listRepos(nonexistentDiv, data))
  .catch(error =>  writeError(nonexistentDiv, error))


// List Repos
function listRepos (listDiv, repos) {
  console.log(repos)
  let ul = document.createElement('ul')
  repos.forEach(repo => {
    let li = document.createElement('li')
    li.innerHTML = `<a href=${repo.url}>${repo.name}</a>`
    ul.append(li)
  })
  console.log(ul)
  listDiv.append(ul)
}

// Writes Errors
function writeError (errorDiv, error) {
  let errorMessage = document.createElement('div')
  errorMessage.classList.add('is-error')
  errorMessage.innerHTML = 
    `<div> status: ${error.status}</div>
     <div> statusText: ${error.statusText} </div>
     <div> message: ${error.message} </div>`
  errorDiv.append(errorMessage)
}