JSFiddle - React, Tailwind, and code Playground

by greenido

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js"></script>
<!doctype html>
<html ng-app="Twitter">
    
    <body>
         <h2>The Power Of Angular And JSONP</h2>

        <div ng-controller="TwitterCtrl">
            <form class="form-horizontal">
                <input type="text" ng-model="searchTerm" >
                <button class="btn" ng-click="doSearch()"><i class="icon-search"></i>Go Go Go</button>
            </form>
            <table class="table table-striped">
                <tr ng-repeat="tweet in twitterResult.results">
                    <td><img src="{{tweet.profile_image_url}}" class="floatLeft"/> {{tweet.text}}</td>
                </tr>
            </table>
        </div>
    </body>

</html>

CSS

h2 {
    padding: 10px;
    margin-left: 30px;
    background: lightyellow;
    width: 250px;
}
.form-horizontal {
    background: yellow;
    padding: 1em;
    width: 300px;
}
.floatLeft { 
    float: left; 
    margin: 4px; 
}
td {
    padding: 8px;
    background: grey;
    width: 300px;
    border-radius: 20px;
}

JavaScript

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


function TwitterCtrl($scope, $resource) {
    $scope.twitter = $resource('http://search.twitter.com/:action', {
        action: 'search.json',
        q: 'angularjs',
        callback: 'JSON_CALLBACK'
    }, {
        get: {
            method: 'JSONP'
        }
    });

    $scope.doSearch = function () {
        $scope.twitterResult = $scope.twitter.get({
            q: $scope.searchTerm
        });
    };
}