Github organization repositories lister

by dipish

HTML

<div id="repoLister"></div>

CSS

body {
    padding: 50px;
}

JavaScript

// RepoLister plugin
function RepoLister(container) {
    this.$container = $(container);
    
    this.buildDom();
    this.initListeners();
}
RepoLister.prototype = {
    constructor: RepoLister,
    
    API_ENDPOINT: 'https://api.github.com/',
    
    getOrgReposUrl: function(orgName) {
        return this.API_ENDPOINT + 'orgs/' + orgName + '/repos';
    },
    
    buildDom: function() {
        var $searchInput, $searchLabel, $repoList;
        
        $searchInput = $('<input>', {
            type:     'text',
            class:    'searchInput'
        });
        this.$searchInput = $searchInput;
        
        $searchLabel = $('<label>', {
            class: 'searchLabel',
            text:  'Enter org name: '
        });
        this.$searchLabel = $searchLabel;
        
        $searchInput.appendTo($searchLabel);
        
        $repoList = $('<ul>', {
            class: 'repoList'
        });
        this.$repoList = $repoList;
        
        this.$container.append($searchLabel).append($repoList);
    },
    
    initListeners: function() {
        this.$searchInput.on('keypress', this.onInputKeyPress.bind(this));
    },
    
    onInputKeyPress: function(e) {
        var value;

        if(e.which == 13) {
            
            value = this.$searchInput.val()
            value && this.fetchRepos(value);
        }
    },
    
    fetchRepos: function(orgName) {
        var $repoList = this.$repoList,
            $container = this.$container;
        
        $.getJSON(this.getOrgReposUrl(orgName), {type: 'sources'}).then(function(data) {
            var childElements = $.map(data, function(item) {
                return $('<li>', {
                    html: $('<a>', {
                         href: item.url,
                         text: item.name,
                         target: '_blank'
                    })
                });
            });
            $repoList.detach().html(childElements).appendTo($container);
        });
   ...