JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://angularlight.org/bin/alight_0.10.last.min.js"></script>
<div al-app="searchWidget">
<form class="form-inline" role="form" al-submit="query()">
    <div class="input-group">
        <input type="text" class="form-control" al-value="search" />
        <span class="input-group-btn">
            <button type="submit" class="btn btn-info">Search</button>
        </span>
    </div>
</form>
<img src="http://loadinfo.net/main/download?spinner=1701&disposition=inline" al-show="loading" />
<ul>
    <li al-repeat="item in result">
        {{item.name}} / {{item.description}} / {{item.watchers}}
    </li>
</ul>
    
</div>

JavaScript

function searchWidget(scope) {
    scope.search = 'tetris+language:assembly';
    scope.loading = false;
    scope.result = [];
    
    scope.query = function() {
        scope.loading = true;
		$.get('https://api.github.com/search/repositories?sort=stars&order=desc&q='+scope.search).then(function(data){
            scope.result = data.items
            scope.loading = false;
            scope.$scan();
        });
    };

};