FCC Leaderboard

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

Made with React

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>FCC Leaderboard</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app"></div>
  <script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script>
<script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.14.0/axios.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/0damian/fcc-leaderboard-xEbLJr */
body {
  background: #e5e5e5;
}
body table {
  width: 66.66666666%;
  margin: 24px auto;
  font-family: Roboto, sans-serif;
}
body table caption {
  background: #006400;
  color: #fff;
  font-weight: 100;
  padding: 12px 0;
}
body table caption img.logo {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 24px;
}
body table tbody tr:nth-child(odd) {
  background: #f5f5f5;
}
body table th.points {
  text-align: center;
}
body table td {
  text-align: center;
}
body table td .avatar-img {
  display: inline-block;
  border-radius: 50%;
  width: 48px;
  height: auto;
  margin: 3px 12px 3px 0;
}
body .latest:hover, body .alltime:hover {
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  table {
    width: 90%;
  }
}


/*Downloaded from https://www.codeseek.co/0damian/fcc-leaderboard-xEbLJr */
var RankingContainer = React.createClass({
  displayName: 'RankingContainer',

  getInitialState: function getInitialState() {
    return {
      latestData: '[]',
      allTimeData: '[]',
      view: 'latest'
    };
  },
  componentDidMount: function componentDidMount() {
    this.getData(this.props.latestUrl).then(function (resp) {
      this.setState({
        latestData: JSON.stringify(resp.data)
      });
    }.bind(this)).catch(function (err) {
      console.log('Latest data error: ' + err);
    }.bind(this));
    this.getData(this.props.allTimeUrl).then(function (resp) {
      this.setState({
        allTimeData: JSON.stringify(resp.data)
      });
    }.bind(this)).catch(function (err) {
      console.log('All time data error: ' + err);
    }.bind(this));
  },
  getData: function getData(source) {
    return axios.get(source);
  },
  handleClick: function handleClick(e) {
    e.preventDefault();
    if (e.target.className == 'latest') {
      if (this.state.view != 'latest') {
        this.setState({
          view: 'latest'
        });
      }
    } else {
      if (this.state.view == 'latest') {
        this.setState({
          view: 'alltime'
        });
      }
    }
  },
  render: function render() {
    return React.createElement(
      'table',
      null,
      React.createElement(
        'caption',
        null,
        React.createElement('img', { src: 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt: 'FreeCodeCamp', className: 'logo' }),
        'Top 100'
      ),
      React.createElement(
        'thead',
        null,
        React.createElement(
          'tr',
          null,
          React.createElement(
            'th',
            { rowSpan: '2' },
            '#'
          ),
          React.createElement('th', { rowSpan: '2' }),
          React.createElement(
            'th',
            { rowSpan: '2' },
            'camper'
          ),
          React.createElement(
            'th',
            {
              colSpan: '2',
              className: 'points'
            },
            'points'
          )
        ),
        React.createElement(
          'tr',
          null,
          React.createElement(
            'th',
            {
              onClick: this.handleClick,
              className: 'latest' },
            'last 30 days\xA0',
            this.state.view == 'latest' ? String.fromCharCode(9660) : ''
          ),
          React.createElement(
            'th',
            {
              onClick: this.handleClick,
              className: 'alltime' },
            'all time\xA0',
            this.state.view == 'alltime' ? String.fromCharCode(9660) : ''
          )
        )
      ),
      React.createElement(TableBody, {
        data: this.state.view == 'latest' ? this.state.latestData : this.state.allTimeData
      })
    );
  }
});

var TableBody = React.createClass({
  displayName: 'TableBody',

  render: function render() {
    var count = 0;
    var body = JSON.parse(this.props.data).map(function (user) {
      count++;
      return React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          null,
          count
        ),
        React.createElement(
          'td',
          null,
          React.createElement('img', { src: user.img, alt: 'Avatar for ' + user.username, className: 'avatar-img' })
        ),
        React.createElement(
          'td',
          null,
          user.username
        ),
        React.createElement(
          'td',
          null,
          user.recent
        ),
        React.createElement(
          'td',
          null,
          user.alltime
        )
      );
    });
    return React.createElement(
      'tbody',
      null,
      body
    );
  }
});

ReactDOM.render(React.createElement(RankingContainer, {
  latestUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
  allTimeUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime'
}), document.getElementById('app'));

Comments