github repo listed api

github repo listed api

by Norlihazmey Ghazali

HTML

<div id="repos">
    <ul id="repo_list">
    </ul>
</div>
<div id="repo_content"></div>
<button id="btn_get_repos">Get Repos</button><span id="repo_count"></span>

CSS

#repos {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    padding: 10px;
}

ul {
    list-style-type: none;
}

ul li {
    font-weight: bold;
    font-size: 18px;
    color: #0596FF;
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
    padding-left: 5px;
}

ul li:hover {
    background-color: #11FFE4;
    cursor: pointer;
}

ul li a {
    color: #0596FF;
    text-decoration: none;
}

ul li a:visited {
    font-weight: bold;
    font-size: 16px;
    color: #0596FF;
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
}

JavaScript

$("#btn_get_repos").click(function() {
    $.ajax({
        type: "GET",
        url: "https://api.github.com/users/metallurgical/repos",
        dataType: "json",
        success: function(result) {
            for( i in result ) {
                $("#repo_list").append(
                    "<li><a href='" + result[i].html_url + "' target='_blank'>" +
                    result[i].name + "</a></li>"
                );
                console.log("i: " + i);
            }
            console.log(result);
            $("#repo_count").append("Total Repos: " + result.length);
        }
    });
});