FreeCodeCamp Leaderboard

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp Leaderboard</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>

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

  
</head>

<body>

  <div id="root"></div>
  <script src='https://unpkg.com/react@16/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/0c0de/freecodecamp-leaderboard-QaKPmL */
@import url('https://fonts.googleapis.com/css?family=Pacifico');

.logo{
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}

nav{
  background-color: #45B69C;
}

body{
  background-color:#D8DDEF;
}

.brand-logo{
  font-family: 'Pacifico', 'sans-serif' !important;
}

h4,h5,h6,p{
  color:#7293A0;
}

.divider{
  border: 0.5px solid #A0A4B8;
}

/*Downloaded from https://www.codeseek.co/0c0de/freecodecamp-leaderboard-QaKPmL */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var LeaderBoard = function (_React$Component) {
  _inherits(LeaderBoard, _React$Component);

  function LeaderBoard(props) {
    _classCallCheck(this, LeaderBoard);

    var _this = _possibleConstructorReturn(this, (LeaderBoard.__proto__ || Object.getPrototypeOf(LeaderBoard)).call(this, props));

    _this.state = {
      recent: {},
      alltime: {},
      endpoints: ['https://fcctop100.herokuapp.com/api/fccusers/top/recent', 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime']
    };
    return _this;
  }

  _createClass(LeaderBoard, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.GetAllUsersPoints(this.state.endpoints);
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { 'class': 'none' },
        React.createElement(
          'nav',
          null,
          React.createElement(
            'div',
            { 'class': 'nav-wrapper' },
            React.createElement(
              'a',
              { 'class': 'left brand-logo logo', href: 'www.freecodecamp.org' },
              React.createElement('img', { src: 'https://design-style-guide.freecodecamp.org/downloads/freeCodeCamp-alternative.png', width: '400px', height: 'auto' })
            ),
            React.createElement(
              'ul',
              { 'class': 'right brand-logo' },
              React.createElement(
                'li',
                null,
                ' LeaderBoard for Campers'
              )
            )
          )
        ),
        React.createElement(
          'div',
          { 'class': 'row' },
          React.createElement(
            'div',
            { 'class': 'col s12 m12 l12 data-holder' },
            React.createElement(
              'h5',
              { 'class': 'col s2 m2 l1' },
              '#'
            ),
            React.createElement(
              'h5',
              { 'class': 'col s4 m4 l3' },
              'Name'
            ),
            React.createElement(
              'h5',
              { 'class': 'col s3 m3 l4' },
              'Points last 30 days'
            ),
            React.createElement(
              'h5',
              { 'class': 'col s3 m3 l4' },
              'All Time points'
            ),
            React.createElement('div', { 'class': 'divider' }),
            React.createElement(Users, { info: this.state.recent })
          )
        )
      );
    }
  }, {
    key: 'GetAllUsersPoints',
    value: function GetAllUsersPoints(endpoints) {
      var _this2 = this;

      for (var x = 0; x < endpoints.length; x++) {
        console.log('Executing ajax in ', endpoints[x]);
        $.ajax({
          url: endpoints[x],
          dataType: 'JSON',
          method: 'GET',
          success: function success(a) {
            if (x == 1) {
              _this2.setState({ recent: a });
              console.log(_this2.state.recent[0]);
            } else {
              _this2.setState({ alltime: a });
              console.log(_this2.state.alltime[0]);
            }
          },
          error: function error(b) {
            console.log("Some error occurred in ajax request ", b);
          }
        });
      }
    }
  }]);

  return LeaderBoard;
}(React.Component);

var Users = function (_React$Component2) {
  _inherits(Users, _React$Component2);

  function Users(props) {
    _classCallCheck(this, Users);

    var _this3 = _possibleConstructorReturn(this, (Users.__proto__ || Object.getPrototypeOf(Users)).call(this, props));

    _this3.state = {
      info: {}
    };
    return _this3;
  }

  _createClass(Users, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var information = this.props.info;
      this.setState({ info: information });
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { 'class': 'row' },
        React.createElement(
          'h5',
          { 'class': 'col s2 m2 l1' },
          this.state.info.key
        ),
        React.createElement(
          'h5',
          { 'class': 'col s4 m4 l3' },
          this.state.info.username
        ),
        React.createElement(
          'h5',
          { 'class': 'col s3 m3 l4' },
          this.state.info.recent
        ),
        React.createElement(
          'h5',
          { 'class': 'col s3 m3 l4' },
          this.state.info.alltime
        ),
        React.createElement('div', { 'class': 'divider' })
      );
    }
  }]);

  return Users;
}(React.Component);

ReactDOM.render(React.createElement(LeaderBoard, null), document.getElementById("root"));

Comments