23maverick23
3/17/2015 - 11:22 AM

JS Bin // source http://jsbin.com/mobima

JS Bin

// source http://jsbin.com/mobima

jsbin.mobima.js
content_copyfile_download
$(function() {
  // ajax request to github api
  $.ajax({
    url: 'https://api.github.com/users/23maverick23/events/public'
  })
  .done(function(data) {
    var gh = $('#github-activity');
    
    console.log(data);
    
    data.forEach(function(object) {
      var type = object.type,
          repo = object.repo.name;
      gh.append('<li class="list-group-item">' + determineIcon(type) + type + ' - ' + repo + '</li>');
    });
  });
  
  function createListItem(object) {
    
  }
  
  function determineIcon(type) {
    var icon = '';
    
    switch (type) {
      case 'WatchEvent':
        icon = 'star';
        break;
      case 'CreateEvent':
        icon = 'plus';
        break;
      case 'PushEvent':
        icon = 'repo-push';
        break;
      case 'IssuesEvent':
        icon = 'issue-opened';
        break;
      case 'PullRequestReviewCommentEvent':
        icon = 'comment-discussion';
        break;
      case 'IssueCommentEvent':
        icon = 'comment';
        break;
      case 'PullRequestEvent':
        icon = 'git-pull-request';
        break;
      default:
    }
    
    return '<span class="octicon octicon-' + icon + '"></span> ';
  }
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <!-- Linked assets -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css" rel="stylesheet" type="text/css" />
  <link href="http://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.ttf" rel="stylesheet" type="text/css" />
  <link href="http://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.woff" rel="stylesheet" type="text/css" />
</head>
<body style="padding-top: 40px;">

  <div class="container">
    <ul id="github-activity" class="list-group">
      <li class="list-group-item">
        <h4 class="list-group-item-heading">Heading</h4>
        <p class="list-group-item-text">Body text</p>
      </li>
    </ul>
  </div>
  
  <!-- Script files -->
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script id="jsbin-javascript">
$(function() {
  // ajax request to github api
  $.ajax({
    url: 'https://api.github.com/users/23maverick23/events/public'
  })
  .done(function(data) {
    var gh = $('#github-activity');
    
    console.log(data);
    
    data.forEach(function(object) {
      var type = object.type,
          repo = object.repo.name;
      gh.append('<li class="list-group-item">' + determineIcon(type) + type + ' - ' + repo + '</li>');
    });
  });
  
  function createListItem(object) {
    
  }
  
  function determineIcon(type) {
    var icon = '';
    
    switch (type) {
      case 'WatchEvent':
        icon = 'star';
        break;
      case 'CreateEvent':
        icon = 'plus';
        break;
      case 'PushEvent':
        icon = 'repo-push';
        break;
      case 'IssuesEvent':
        icon = 'issue-opened';
        break;
      case 'PullRequestReviewCommentEvent':
        icon = 'comment-discussion';
        break;
      case 'IssueCommentEvent':
        icon = 'comment';
        break;
      case 'PullRequestEvent':
        icon = 'git-pull-request';
        break;
      default:
    }
    
    return '<span class="octicon octicon-' + icon + '"></span> ';
  }
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
  <\!-- Linked assets -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css" rel="stylesheet" type="text/css" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.ttf" rel="stylesheet" type="text/css" />
  <link href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.woff" rel="stylesheet" type="text/css" />
</head>
<body style="padding-top: 40px;">

  <div class="container">
    <ul id="github-activity" class="list-group">
      <li class="list-group-item">
        <h4 class="list-group-item-heading">Heading</h4>
        <p class="list-group-item-text">Body text</p>
      </li>
    </ul>
  </div>
  
  <\!-- Script files -->
  <script src="//code.jquery.com/jquery.min.js"><\/script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">$(function() {
  // ajax request to github api
  $.ajax({
    url: 'https://api.github.com/users/23maverick23/events/public'
  })
  .done(function(data) {
    var gh = $('#github-activity');
    
    console.log(data);
    
    data.forEach(function(object) {
      var type = object.type,
          repo = object.repo.name;
      gh.append('<li class="list-group-item">' + determineIcon(type) + type + ' - ' + repo + '</li>');
    });
  });
  
  function createListItem(object) {
    
  }
  
  function determineIcon(type) {
    var icon = '';
    
    switch (type) {
      case 'WatchEvent':
        icon = 'star';
        break;
      case 'CreateEvent':
        icon = 'plus';
        break;
      case 'PushEvent':
        icon = 'repo-push';
        break;
      case 'IssuesEvent':
        icon = 'issue-opened';
        break;
      case 'PullRequestReviewCommentEvent':
        icon = 'comment-discussion';
        break;
      case 'IssueCommentEvent':
        icon = 'comment';
        break;
      case 'PullRequestEvent':
        icon = 'git-pull-request';
        break;
      default:
    }
    
    return '<span class="octicon octicon-' + icon + '"></span> ';
  }
});</script></body>
</html>