JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<input id="search" type="text" />
<div id="results"></div>

JavaScript

// search namespace
var MySearch = MySearch || {};

// singleton for search setup
MySearch.Search = (function() {
    // private vars
    var requestUrl = 'https://api.github.com/legacy/repos/search/',
        styles = '<style type="text/css">body { background: #555; font-size:20px; font-family: Arial, Helvetica, sans-serif; color: #f0f0f0; } label { display: block; } #results li { font-size: 0.8em; list-style-type: none; color: #fff; margin: 0.5em 0; } #results li a { color: white; text-decoration: none; } #results li a:hover { color: yellow; } label { font-size: 0.8em; margin: 1em 0; }</style>',
        readme = '<label>Please type the term to search GitHub for in the text field and hit the ENTER key.</label>',
        // defaults
        input = '#search',
        results = '#results',
        el = 'body';

    // public methods
    return {
        // Initial options (user can customize el, input, results elements)
        init: function(options) {
            var _this = this;
            options = options || {};

            this.el = $(options.resultsEl || el);
            this.input = $(options.searchInput || input);
            this.results = $(options.resultsEl || results);

            $('head').prepend(styles);
            this.el.prepend(readme);

            this.input.change(function() {
                if (!$(this).val()) {
                    alert("Please enter a search term");
                } else {
                    _this.search($(this).val());
                }
            });
        },
        // Performs search
        search: function(query) {
            var _this = this;
            this.results.html('<h2>Searching GitHub...</h2>');
            $.getJSON(requestUrl + encodeURIComponent(query))
                .done(function(json) {
                    _this.render(json, query);
                })
                .fail(function(status) {
                    $(_this.results).html('ERROR: Please see console.');
                   ...