JSFiddle - React, Tailwind, and code Playground

by itsazzad

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h2>Photos</h2>

  <div id="album">
    <!-- photos from albumId 10 go here -->

    <!-- Example output:
        
        <div class="entry">
          <h6>mollitia dolorem qui</h6>
          <img src="http://placehold.it/150/e30072" alt="452" />
        </div>
        
        -->
  </div>
</div>

JavaScript

// Ajax with jQuery
// API: 'http://jsonplaceholder.typicode.com/photos'
// Supported parameter: 'albumId'


// your code goes here
var request = $.ajax({
  url: "https://jsonplaceholder.typicode.com/photos",
  method: "GET",
  data: {
    albumId: 10
  },
  dataType: "json"
});

request.done(function(photos) {
  $.each(photos, function(index, photo) {
    $("#album").append(`<div class="entry">
          <h6>${photo.title}</h6>
          <img src="${photo.thumbnailUrl}" alt="${photo.id}" />
        </div>`);
  });
});

request.fail(function(jqXHR, textStatus) {
  alert("Request failed: " + textStatus);
});