JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<body ng-app="githubViewer" ng-controller="MainController">

    <div>

        <h1>{{message}}</h1>

        <div>{{ error }}</div>

        {{username}}

        <form name="searchUser">
            <input type="search" placeholder="Username to find" ng-model="username" />
            <input type="submit" value="Search" ng-click="search(username)" />
        </form>

        <div>
            <div>{{user.name}}</div>
            <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">
            {{user.gravatar_id}}
        </div>

    </div>

</body>

JavaScript

(function () {

    var module = angular.module("githubViewer", []);

    var MainController = function ($scope, $http) {

        var onUserComplete = function (response) {
            $scope.user = response.data;
        };

        var onError = function (reason) {
            $scope.error = "Could not fetch the user";
            $scope.reason = reason;
        };

        $scope.username = "angular";
        $scope.message = "Github Viewer";

        $scope.search = function (username) {
            $http.get("https://api.github.com/users/" + username)
                .then(onUserComplete, onError);
        };
    };

    module.controller("MainController", MainController);

}());