$(document).ready(function() {

  $("#search").on("keyup",function(e) {
    var username = e.target.value;

    // request user info
    $.ajax({
      url: 'https://api.github.com/users/' + username,
      data: {
        client_id: 'bd27811095169a2986c8',
        client_secret: '775086d2ce6236f285bdc437f96a3cb2ca210f21'
      }
    }).done(function(user) {
      // output data
      if (user.name === null || user.name === undefined ) {
        // error handler for username not found
        $("#profile").html(`
          <div class="container text-center error">
            <h1>404!</h1>
            <h4>File not found</h4>
          </div>
        `);
      } else {
        $("#profile").html(`
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">${user.name}</h3>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-3">
                  <img class="thumbnail avatar" src="${user.avatar_url}">
                  <a class="btn btn-primary btn-block" href="${user.html_url}" target="_blank">View Profile</a>
                  <br>
                </div>
                <div class="col-md-9">
                  <span class="label label-default">Public Repos: ${user.public_repos}</span>
                  <span class="label label-primary">Public Gists: ${user.public_gists}</span>
                  <span class="label label-success">Following: ${user.following}</span>
                  <span class="label label-info">Followers: ${user.followers}</span>
                  <br><br>
                  <ul class="list-group">
                    <li class="list-group-item">Location: ${user.location}</li>
                    <li class="list-group-item">Company: ${user.company}</li>
                    <li class="list-group-item">Email: ${user.email}</li>
                    <li class="list-group-item">Website/blog: <a href="${user.blog}" target="_blank">${user.blog}</a></li>
                    <li class="list-group-item">Member Since: ${user.created_at}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <h3 class="page-header">Latest Repos</h3>
          <div id="repos"></div>
          <nav class="text-center" aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        `);
      }

       // request repos info
      $.ajax({
        url: 'https://api.github.com/users/' + username + '/repos',
        data: {
          client_id: 'bd27811095169a2986c8',
          client_secret: '775086d2ce6236f285bdc437f96a3cb2ca210f21',
          sort: 'created: asc',
          per_page: 3
        }
      }).done(function(repos) {
        // output data
        $.each(repos, function(index, repo) {
          $("#repos").append(`
            <div class="well">
              <div class="row">
                <div class="col-md-7">
                  <strong>${repo.name}</strong>
                  <br><br>
                  ${repo.description}
                </div>
                <div class="col-md-3">
                  <span class="label label-default">Forks: ${repo.forks_count}</span>
                  <span class="label label-primary">Watchers: ${repo.watchers_count}</span>
                  <span class="label label-success">Stars: ${repo.stargazers_count}</span>
                </div>
                <div class="col-md-2">
                  <br>
                  <a class="btn btn-primary" href="${repo.html_url}" target="_blank">Visit</a>
                </div>
              </div>
            </div>
          `);
        });
      });

    });
  });

});
@@ -634,33 +634,56 @@
           %3C/div%3E
+ %3C!-- end container --%3E
 %0A
-
         %60);%0A    
@@ -872,32 +872,59 @@
           %3C/div%3E
+ %3C!-- end panel-heading --%3E
 %0A            %3Cdi
@@ -2217,32 +2217,49 @@
           %3C/div%3E
+ %3C!-- end row --%3E
 %0A            %3C/d
@@ -2253,32 +2253,92 @@
           %3C/div%3E
+ %3C!-- end panel-body --%3E%0A          %3C/div%3E %3C!-- end panel --%3E
 %0A          %3C/div
@@ -2324,38 +2324,32 @@
 l --%3E%0A          
-%3C/div%3E
 %0A          %3Ch3 c
@@ -2381,24 +2381,25 @@
  Repos%3C/h3%3E%0A
+%0A
           %3Cd
@@ -2415,24 +2415,25 @@
 pos%22%3E%3C/div%3E%0A
+%0A
           %3Cn
@@ -3094,16 +3094,44 @@
   %3C/nav%3E
+ %3C!-- end pagination nav --%3E
 %0A       
@@ -4343,32 +4343,49 @@
           %3C/div%3E
+ %3C!-- end row --%3E
 %0A            %3C/d
@@ -4379,32 +4379,50 @@
           %3C/div%3E
+ %3C!-- end well --%3E
 %0A          %60);%0A 

update js file