JSFiddle - React, Tailwind, and code Playground

by phoffman

HTML

<html ng-app='Twitter'>
<body>
    <div ng-controller="TwitterCtrl">
        <input type="text" ng-model="searchTerm">
        <button ng-click="doSearch()">Search</button>
        <table>
            <tr ng-repeat="tweet in twitterResult.results">
                <td><img src="{{tweet.profile_image_url}}" alt="" /></td>
                <td>{{tweet.from_user}}</td>
                <td>{{tweet.text}}</td>
            </tr>
        </table>
    </div>
</body>
</html

CSS

td{padding:15px 0;}

table tr:nth-child(2n){
    background-color:#eee;            
}
table tr:hover{
    background-color:#f2672d;        
}
td{ border: 1px solid #eee; }

JavaScript

angular.module('Twitter', ['ngResource']);

function TwitterCtrl($scope, $resource) {
    //JSON_CALLBACK provided to us by angular, automatically generates a callback from angular.
    $scope.twitter = $resource('http://search.twitter.com/:action',
                               {action:'search.json', q:'beer', callback:'JSON_CALLBACK'},
                               {get:{method:'JSONP'}});
    $scope.doSearch = function(){
        $scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm});
    }
    
}