goat_api_demo

by Admiral Potato

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css">
<div class="container p-5">
  <div class="card">
    <div class="card-body">
      <div class="card-title">GOATS!!!</div>
      <p class="card-text">Here's some goats</p>
    </div>
  </div>
  <div id="image-card-holder" class="pt-5"></div>
</div>

JavaScript

var imageCardHolder = document.getElementById('image-card-holder');

var makeHTMLforItemData = function (item) {
  return `
        <div class="card mt-3">
            <img src="${item.link}" class="card-img-top" alt="${item.description}">
            <div class="card-body">
                <h5 class="card-title">${new Date(item.datetime).toISOString()}</h5>
                <p class="card-text">${item.description}</p>
            </div>
        </div>
    `
};

var handleResponseJSON = function(json) {
  console.log("handleResponseJSON: json", json);
  json.data.images.forEach(function(image) {
	  imageCardHolder.innerHTML += makeHTMLforItemData(image);
  })
}

var handlePhotoResponse = function(response) {
  console.log("handlePhotoRequest: response", response);
  response.json().then(handleResponseJSON);
}

var requestPhotoData = function() {
  var apiURL = 'https://imgur-api-readonly.glitch.me/album/LGvJH';
  var responsePromise = fetch(apiURL);
  responsePromise.then(handlePhotoResponse);
  console.log("requestPhotoData: responsePromise", responsePromise);
};

requestPhotoData();