A Pen by Justin

Thumbnail
This awesome code was written by miniatureape, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright miniatureape ©
  • HTML
  • CSS
  • JavaScript
    <div id="game">
  <h1>Which is the better animal?</h1>
  <div class="rows"></div>  
  <div class="results"></div>
</div>`

/*Downloaded from https://www.codeseek.co/miniatureape/a-pen-by-justin-CrBbE */
    #game {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  font-family: Helvetica;
}
.col {
  float: left;
  padding: 5px;
}
.col img {
  width: 250px;
}
.row {
  clear: both;0
}
.results {
  clear: both;
}

.selected {
  border: 2px red solid;
}


/*Downloaded from https://www.codeseek.co/miniatureape/a-pen-by-justin-CrBbE */
    var clientId = 'fbb13314c6b34723a09523ab3521acca';

if (!clientId) {
  // alert('Put your own instagram client id in the above code to use this example.');
}

var urlTemplate = "https://api.instagram.com/v1/tags/<ANIMAL>/media/recent";

var makeRequest = function(animal) {
  
    var req = $.ajax({
        url: urlTemplate.replace("<ANIMAL>", animal),
        dataType: 'jsonp',
        data: {
            client_id: clientId
       },
    })
    
    return req;
}; 

var dogRequest = makeRequest('dog');
var catRequest = makeRequest('cat');

var createRow = function(dogPhoto, catPhoto) {
  var dogCol = "<div class='row'><div class='col dog'><img src='" + dogPhoto + "'></div>";
    var catCol = "<div class='col cat'><img src='" + catPhoto + "'></div></div>";
  return $(dogCol + catCol);
}

var recalculateScore = function() {
  var dogScore = 0, catScore = 0;
  $('.row').each(function() {
    var selected = $(this).find('.selected');
    if (selected.length) {
      if (selected.parents('.dog').length) {
        dogScore++;
      } else if (selected.parents('.cat').length) {
        catScore++;
      }
      
    }
  });
  $('.results').html("dogs: " + dogScore + " cats:" + catScore);
};

var makeGame = function(dogResults, catResults) {
  // First lets store the actual results we need in 
  // a variable so its easier to work with.
  var dogArray = dogResults[0].data;
  var catArray = catResults[0].data;
  
  // The results can have uneven numbers, so lets find 
  // the result with the fewest items and chop our
  var limit = Math.min(dogArray.length, catArray.length) - 1;
  
  // slice lets take only the parts you want from an array, 
  // so here I'm cutting from the begging (0) to the limit, 
  // which is the smallest length.
  dogArray = dogArray.slice(0, limit);
  catArray = catArray.slice(0, limit);
  
  // Now that we have equal length arrays we can loop over 
  // and add them to our page.
  
  var rows = $('.rows');
  
  for (var i = 0; i < dogArray.length; i++) {
    var dogPhoto = dogArray[i].images.low_resolution.url;
    var catPhoto = catArray[i].images.low_resolution.url;
    rows.append(createRow(dogPhoto, catPhoto));
  }
  
  $('.row').on('click', 'img', function(e) {
    var row = $(this).parents('.row');
    row.find('img').removeClass('selected');
    $(this).addClass('selected');
    recalculateScore()
  });
  
};

$.when(dogRequest, catRequest).done(makeGame);

Comments