FreeCodeCamp Camper Leaderboard 2

In this example below you will see how to do a FreeCodeCamp Camper Leaderboard 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by catherine-b, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright catherine-b ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp Camper Leaderboard 2</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1 class="text-center">FreeCodeCamp Camper Leaderboard</h1>
  <div id="content">
  </div>
  <div class="text-center">Written and coded by <span class="name">Catherine Bacon</span></div>
</div>
  <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script>
<script src='https://cdn.rawgit.com/GriddleGriddle/Griddle/master/build/Griddle.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/catherine-b/freecodecamp-camper-leaderboard-2-JKBmkL */
body {
  background-color: #BCAA99;
  color: #8E5572;
}

img {
  width: 50px;
}

.form-control {
  width: 50%;
  background-color: #443850 !important;
  color: #F2F7F2 !important;
  margin: 5px;
}

table {
  border: 3px solid #F2F7F2;
}
table th.sort-ascending {
  color: #443850;
}
table th.sort-descending {
  color: #443850;
}

.name {
  color: #828438;
  text-style: bold;
}


/*Downloaded from https://www.codeseek.co/catherine-b/freecodecamp-camper-leaderboard-2-JKBmkL */
var ImageComponent = React.createClass({
  displayName: "ImageComponent",

  render: function render() {
    var url = this.props.rowData.img;
    return React.createElement(
      "span",
      null,
      React.createElement("img", { src: url, className: "img-circle" }),
      " ",
      this.props.data
    );
  }
});

var WholeTable = React.createClass({
  displayName: "WholeTable",

  getInitialState: function getInitialState() {
    return {
      data: this.props.data
    };
  },

  camperInfo: function camperInfo() {
    $.get({
      url: this.props.url,
      success: function (results) {
        this.setState({
          data: results
        });
      }.bind(this)
    });
  },

  componentDidMount: function componentDidMount() {
    this.camperInfo();
  },

  render: function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(Griddle, {
        results: this.state.data,
        tableClassName: "table",
        showFilter: true,
        columnMetadata: columnMeta,
        columns: ["username", "alltime", "recent"],
        resultsPerPage: 100,
        useGriddleStyles: false
      })
    );
  }
});

var columnMeta = [{
  columnName: "username",
  displayName: "Name",
  customComponent: ImageComponent

}, {
  columnName: "alltime",
  displayName: "All Time"
}, {
  columnName: "recent",
  displayName: "Last 30 days"
}];

var data = [{
  username: "Bob",
  latest: 32,
  total: 235
}, {
  username: "Shelly",
  latest: 2,
  total: 456
}];

ReactDOM.render(React.createElement(WholeTable, { data: data, url: "https://fcctop100.herokuapp.com/api/fccusers/top/recent" }), document.getElementById('content'));

// <Griddle results={this.state.data} />

Comments