ajax_example_html.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/site.css">
</head>
<body>
<nav></nav>
<main class="container">
    <div class="col-md-6">
        <h2>Creep on some code!</h2>
        <form action="">
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="enter a user's github address">
            <button type="submit">Lookup!</button>
        </form>
    </div>
    <div class="col-md-6">
        <h3></h3>
    </div>
</main>
<footer></footer>
<script src="js/jquery-3.0.0.js"></script>
<script src="js/bootstrap.js"></script>
<script>

    function addEmailToPage(profile) {
        $('h3').html("The users email address is " + profile.email);
    }

    function getGitHubProfile(username) {
        var request = $.get("https://api.github.com/users/" + username);

        request.fail(function(error) {
            console.log(error);
        });

        request.done(function (response) {
            console.log(response);
            profile = response;
            // then add their email address to the page
            addEmailToPage(profile);
        });
    }

    // when the user types in a username and hits submit
    $('button').click(function(e) {
        e.preventDefault();
        var username = $("#username").val();
        // call the getGitHubProfile() function with their username
        getGitHubProfile(username);
    });


</script>
</body>
</html>