<div class="container">
    <h1>flickr.through</h1>
    <form id="searchForm">
      <input id="search-text" type="text" placeholder="e.g. nightsky, galaxy, coffee, etc"/>
    </form>
    <div class="title">
      <h2>Search Results</h2>
			<button type="button" id="btn-clear" class="btn">Clear Search</button>
      <button type="button" id="btn-sort" class="btn">Sort by most views</button>
    </div>
    <div id="images"></div>
		<button type="button" class="btn btn-prevPage">previous page</button>
    <button type="button" class="btn btn-nextPage">next page</button>
  </div>
  body {
  	background: #251F48;
  	font-size: 14px;
  	font-family: "Helvetica Neue", sans-serif;
  	color: #fff;
  }
  
  .container {
  	width: 720px;
  	margin: 0 auto;
  }
  
  small {
  	display: block;
  }
  
  h1 {
  	text-align: center;
  }
  
  h2 {
  	display: inline-block;
  	margin-top: 0;
  	margin-bottom: 0;
  }
  
  .title {
  	margin-top: 20px;
  }
  
  #btn-sort {
  	display: inline-block;
  	float: right;
  	margin-top: 2px;
  }
  
  form {
  	padding: 10px 0;
  	display: block;
  	max-width: 100%;
  }
  
  form input {
  	padding: 11px 5px;
  	width: 100%;
  	background: #29224f;
  	color: #fff;
  	border: 0;
  	border-bottom: 1px solid;
  	font-size: 14px;
  }
  
  #btn-clear {
  	display: inline-block;
  	float: right;
  	margin-top: 2px;
  	margin-left: 10px;
  }
  
  .btn {
  	background: #FE173F;
  	border: #AB122C 1px solid;
  	color: #fff;
  	font-size: 14px;
  	text-transform: lowercase;
  	text-align: center;
  	cursor: pointer;
  }
  
  .btn-nextPage,
  .btn-prevPage {
  	display: inline-block;
  	margin: 10px auto;
  	padding: 10px 15px;
  	cursor: default;
  	width: 20%;
  }
  
  .btn-nextPage {
  	float: right;
  }
  
  #images {
  	margin-top: 20px;
  	display: -moz-box;
  	display: -webkit-flex;
  	display: flex;
  	display: -ms-flexbox;
  	-webkit-box-align: center;
  	-webkit-align-items: center;
  	-ms-flex-align: center;
  	align-items: center;
  	-webkit-box-pack: center;
  	-webkit-justify-content: center;
  	-ms-flex-pack: center;
  	justify-content: center;
  	-webkit-box-lines: multiple;
  	-moz-box-lines: multiple;
  	-o-box-lines: multiple;
  	-webkit-flex-wrap: wrap;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  }
  
  #images .results {
  	position: relative;
  	flex: 1 1 100px;
  	max-height: 100px;
  	overflow: hidden;
  }
  
  .count {
  	position: absolute;
  	top: 35%;
  	left: 35%;
  	color: #FE173F;
  	padding: 5px 10px;
  	font-size: 18px;
  	font-weight: 700;
  	background: rgba(255, 255, 255, 0.6);
  }
// work in progress
$(document).ready(function() {
	var div = $("div")[0];
	var apiKey = 'bd9987dd291178d6ec1886920d9cd7c8';
	var flickerAPI = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=' + apiKey + '&nojsoncallback=1';
	$('.btn-prevPage, .btn-nextPage').hide();

	function removeDivs() {
		$('.results').remove();
		$('small').remove();
	}
	
	// search photos on flickr
	function getImages(pageNum) {
		removeDivs();

		$.getJSON(flickerAPI, {
				text: $("#search-text").val(),
				tagmode: "photo",
				format: "json",
				extras: "views, url_q",
				per_page: 21,
				page: pageNum
			})
			.done(function(data) {
				photos = data.photos;
				$.data(div, "photos", photos);

				// create results section where the images are the same size with view count on the image
				$.each(photos.photo, function(p, photo) {
					var resultsClass = $("<div>").addClass('results').appendTo("#images");
					$("<img>").attr("src", photo.url_q).appendTo(resultsClass);
					$("<div>").addClass('count').appendTo(resultsClass).text(photo.views);
				});
				$('<small>(' + (photos.pages * photos.perpage) + ' total results)</small>').appendTo('.title');
				$('.title h2').text('Search Results for ' + $("#search-text").val());
				if (data.photos.pages !== pageNum) {
					$('.btn-nextPage').show();
				};
			});
	};

	function searching() {
		$('.btn-prevPage, .btn-nextPage').hide();
		getImages(1);
	};

	$("#btn-sort").click(function() {
		var photoArray = photos.photo;

		// sort images by most views
		function SortByViews(a, b) {
			var aName = Number(a.views);
			var bName = Number(b.views);
			return ((aName > bName) ? -1 : ((aName < bName) ? 1 : 0));
		}
		photoArray.sort(SortByViews);

		// replace original list with sorted list
		$('.results').remove();
		$.each(photoArray, function(p, photo) {
			var resultsClass = $("<div>").addClass('results').appendTo("#images");
			$("<img>").attr("src", photo.url_q).appendTo(resultsClass);
			$("<div>").addClass('count').appendTo(resultsClass).text(photo.views);
		});
	});

	$(".btn-nextPage").click(function() {
		// show next page
		$('.btn-prevPage').show();
		next = photos.page + 1;
		getImages(next);
	});

	$(".btn-prevPage").click(function() {
		// show previous page
		previous = photos.page - 1;
		if (previous == 1) {
			$('.btn-prevPage').hide();
		}
		getImages(previous);
	});

	$('#btn-clear').click(function() {
		// clear filter and results
		removeDivs();
		$('#search-text').val('');
		$('.btn-nextPage').hide();
		$('.title h2').text('Search Results');
	});

	$('#search-text').keyup(_.debounce(searching, 400));
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js