AJAX External API

    //EXTERNAL API ajax3.html -> https://api.github.com/users
    <button id="button">Load Github Users</button>
    <br><br>
    <h2></h2>Github Users <span><a href="https://api.github.com/users">Github API</a></span></h2>
    <div id="users" class="users"></div>
    

    //AJAX js
    document.getElementById('button').addEventListener('click', loadUsers);

        //Load Github Users
        function loadUsers(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.github.com/users', true);
            xhr.onload = function(){
                if(this.status == 200){
                    var users = JSON.parse(this.responseText);
                    console.log(users);
                    var output = '';
                    for(var i in users){
                    output += 
                        '<div class="user">' +
                        '<img src="'+users[i].avatar_url+'" width="70" height="70">'
                        +'<ul>' + 
                        '<li>Login: '+users[i].login+' </li>' +
                        '<li>id: '+users[i].id+' </li>' +
                        '<li>nodeID: '+users[i].node_id+' </li>' +
                        '</ul>' +
                        '</div>';
                        document.getElementById('users').innerHTML = output;
                    }
                    
                }
            }
            xhr.send();

        }