Leaderboard

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-offset-3 col-sm-6 page-header">
          <span>
            <h1>Leaderboard</h1>
          </span>
          <span class="button-span pull-right">
            <button class="btn btn-default btn-sm btn-custom" id="refresh">Refresh</button>
          </span>
        </div>
        <div class="col-sm-offset-4 col-sm-4">
          <ol id="leaderboard"></ol>
        </div>
      </div>
    </div>
  </body>

</html>

var $$ = {
  storeData: function(array) {
    localStorage["karma.data"] = JSON.stringify(array);
  },
  readData: function() {
    this.data = JSON.parse(localStorage["karma.data"]);
  },
  sortBoard: function(resp) {
    console.log(resp);
    return resp.sort(function(a, b) { return b.points-a.points });
  },
  fillLeaderboard: function(board) {
    participants = [];
  
    for(var i = 0; i < board.length; i++) {
      
      var $li = $("<li>").addClass("participant"),
          $h3 = $("<h3>").addClass("participant-tag");
      
      $li.text( i+1 + ". " + board[i].name + " " + "(" + board[i].points + ")" );
      $h3.append($li);
      participants.push($h3);
    }
    $("#leaderboard").append(participants);
  },
  setBoard: function(resp) {
    var sortedLeaders = [];
    $("#leaderboard").empty();
    sortedLeaders = this.sortBoard(resp);
    this.fillLeaderboard(sortedLeaders);
  },
  asyncFill: function() {
    $.ajax("data.json", {}).success(function(response) {
      var currentData;
      $$.storeData(response.data);
      $$.setBoard(response.data);
    }).error(function(error, a, b) {
      console.log("error loop");
      console.log(error, a, b);
    });
  },
  setData: function() {
    var currentData;
    if ( !localStorage["karma.data"] ) {
      this.asyncFill();
    } else {
      this.readData();
      this.setBoard(this.data);
    }
  },
  modifyPointsFor: function(indexInArray, newPoints) {
    this.data[indexInArray].points = newPoints;
    this.storeData();
  },
  data: []
};

$(document).ready(function() {
  
  $$.setData();
  
  $("#refresh").on("click", function() {
    $$.setData();
    $$.modifyPointsFor(0,100);
    $$.setData();
  })
  
});

/* Styles go here */
body, html {
  background-color: whitesmoke;
}

span {
  display: inline-block;
}

.btn-custom {
  margin-top: 28px;
}

#leaderboard {
  text-align: center;
  padding-left: 0;
  padding-bottom: 10px;
}

.participant {
  list-style: none;
  border: 3px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: white;
  border-radius: 3px;
}

.page-header {
  border-bottom: gray solid 1px;
}

.formatter {
  margin-left: auto;
  margin-right: auto;
}

{ "data": [
  { "name": "Sheryl Boughton", "points": 1 },
  { "name": "Tania Leonian", "points": 1 },
  { "name": "Loren Barrick", "points": 3 },
  { "name": "Stanley Liu", "points": 0 },
  { "name": "Ryan Taylor", "points": 0 },
  { "name": "Son Truong", "points": 1 },
  { "name": "Michael Sankovich", "points": 0 },
  { "name": "Gerald Anekwe", "points": 2 },
  { "name": "Juan Barragan", "points": 1 },
  { "name": "Troy Wood", "points": 0 },
  { "name": "Bonnie So", "points": 0 },
  { "name": "Collin Webb", "points": 2 },
  { "name": "Elijah Olegnowicz", "points": 0 },
  { "name": "Trey Huffine", "points": 1 },
  { "name": "Sean Blattenberger", "points": 0 },
  { "name": "Dan Ward", "points": 1 },
  { "name": "Aliou Maiga", "points": 0 },
  { "name": "Javier Escobar", "points": 2 },
  { "name": "Perrin Clark", "points": 1 }
] }