JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<div ng-app="switchableGrid" ng-controller="SwitchableGridController">

	<div class="bar">

		<!-- These two buttons switch the layout variable,
			 which causes the correct UL to be shown. -->

		<a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
		<a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
	</div>

	<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

	<ul ng-show="layout == 'grid'" class="grid">
		<!-- A view with big photos and no text -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
		</li>
	</ul>

	<ul ng-show="layout == 'list'" class="list">
		<!-- A compact view smaller photos and titles -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
			<p>{{p.caption.text}}</p>
		</li>
	</ul>
</div>

CSS

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 580px;
	padding: 10px;
	margin: 45px auto 25px;
	position:relative;
	text-align:right;
	line-height: 1;
}

.bar a{
	background:#4987a1 center center no-repeat;
	width:32px;
	height:32px;
	display:inline-block;
	text-decoration:none !important;
	margin-right:5px;
	border-radius:2px;
	cursor:pointer;
}

.bar a.active{
	background-color:#c14694;
}

.bar...

JavaScript

// Define a new module. This time we declare a dependency on
// the ngResource module, so we can work with the Instagram API

var app = angular.module("switchableGrid", ['ngResource']);

// Create and register the new "instagram" service
app.factory('instagram', function($resource){

	return {
		fetchPopular: function(callback){

			// The ngResource module gives us the $resource service. It makes working with
			// AJAX easy. Here I am using the client_id of a test app. Replace it with yours.

			var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
				client_id: '642176ece1e7445e99244cec26f4de1f'
			},{
				// This creates an action which we've chosen to name "fetch". It issues
				// an JSONP request to the URL of the resource. JSONP requires that the
				// callback=JSON_CALLBACK part is added to the URL.

				fetch:{method:'JSONP'}
			});

			api.fetch(function(response){

				// Call the supplied callback function
				callback(response.data);

			});
		}
	}

});

// The controller. Notice that I've included our instagram service which we
// defined below. It will be available inside the function automatically.

function SwitchableGridController($scope, instagram){

	// Default layout of the app. Clicking the buttons in the toolbar
	// changes this value.

	$scope.layout = 'grid';

	$scope.pics = [];

	// Use the instagram service and fetch a list of the popular pics
	instagram.fetchPopular(function(data){

		// Assigning the pics array will cause the view
		// to be automatically redrawn by Angular.
		$scope.pics = data;
	});

}