FreeCodeCamp Leaderboard

FreeCodeCamp Leaderboard.markdown

FreeCodeCamp Leaderboard

A table of the Free Code Camp campers who've earned the most brownie points in the past 30 days. User can see how many brownie points they've earned in the past 30 days, and how many they've earned total. User can toggle between sorting the list by how many bronwie points they've earned in the past 30 days and by how many brownie points they've earned total.

A Pen by V on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Play&effect=neon' rel='stylesheet' type='text/css'>

<div class="container-fluid nopadding"> 
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#leaderboard"><span class="glyphicon glyphicon-fire"></span> FREECODECAMP LEADERBOARD</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/82621a904184111473b3" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="leaderboard"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        <h2><span class="glyphicon glyphicon-fire"></span> FreeCodeCamp Leaderboard</h2>
         <div class="btn-group btn-group-justified">
           <a href="#" class="btn btn-primary" id="30days">Top 100 for past 30 days</a>
           <a href="#" class="btn btn-primary" id="alltime">Top 100 for all time</a>
         </div>
        <div id="output">
          Output
        </div>
        <span class="credits">licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

script.js

$(document).on('ready',function(){
  var top100recentURL = "http://fcctop100.herokuapp.com/api/fccusers/top/recent";
  var top100allTimeURL = "http://fcctop100.herokuapp.com/api/fccusers/top/alltime";
  $('#30days').on('click', function(){
    $(this).addClass('active');
    $('#alltime').removeClass('active');
    getTop100(top100recentURL);
  });
  $('#alltime').on('click', function(){
    $(this).addClass('active');
    $('#30days').removeClass('active');
    getTop100(top100allTimeURL);
  });
  
  var Table = React.createClass({
    render: function() {
      return (
        <div>
          <table className="table table-stripped fleft">
            <thead>
              <tr>
                <th>#</th>
                <th>Camper Name</th>
                <th>Points in past 30 days</th>
                <th>All time points</th>
              </tr>
            </thead>
            <tbody id="tbody">
              <div id="instructions"></div>
            </tbody>
          </table>
        </div>
      );
    }
  });
  var Instructions = React.createClass({
    render: function() {
      return (
        <p className="bounceIn"> <span className="glyphicon glyphicon-arrow-up"></span> Select Top <span className="glyphicon glyphicon-arrow-up"></span></p>
      );
    }
  });
  
  ReactDOM.render(<Table />,document.getElementById('output'),);
  ReactDOM.render(<Instructions />, document.getElementById('instructions'));
  
  function getTop100(url){
    $.getJSON(url, function(json){
      console.log(JSON.stringify(json));
      if (json.length > 0){
        var markup = [];
        var TableRow = React.createClass({
          render: function() {
            for (var i=0;i<json.length;i++){
              var Num = i;
              var Name = json[i].username;
              var FCClink = "http://freecodecamp.com/"+json[i].username;
              var Img = json[i].img;
              var Recent = json[i].recent;
              var AllTime = json[i].alltime;
              var LastUpdate = json[i].lastUpdate;
              markup.push(<tr><td>{Num}</td><td><a href={FCClink} target="_blank"><img className="ava" src={Img}/>{Name}</a></td><td>{Recent}</td><td>{AllTime}</td></tr>);
            }
            return (
              <span>
              {markup}
              </span>
            );
          }
        });
        ReactDOM.render(<TableRow />, document.getElementById('tbody'));
      }
    });
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

$black: #000000
$red: #ff0000
body
  color: $black
  font-family: 'Play', sans-serif
  font-size: 2.2em
  overflow-x:hidden
  .nopadding
    padding: 0
  .navbar-brand
    font-size: 1em
  .home
    min-height: 97vh
    height: auto !important
    margin-top: 0.95em
  .sect
    padding-top: 2vh
    .githublogo
      height: 1em
    h2
      text-align: center
      margin-top: 4vh
      font-weight: bold
    #output
      text-align: center
      width: 100%
      height: auto !important
      p
        color: $red
      tr
        text-align: left
      .instructions
        colspan: 4
        rowspan: 4
      a
        text-decoration: none
      .ava
        height: 50px
        border-radius: 50%
        float: left
        margin-right: 0.5em
    .credits
      display: block
      text-align: center
      font-size: 0.75em
      a:hover
        text-decoration: none

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />