LeaderBoard react

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

recipe in new react, but is in bulld version

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>LeaderBoard react</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'>

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

  
</head>

<body>

  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.0.6/js/jquery.tablesorter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/js/jquery.tablesorter.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/vanderdrilu/leaderboard-react-XYrOKQ */
table.tablesorter {
  font-family: arial;
  background-color: #CDCDCD;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
}

table.tablesorter thead tr .header {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-unsorted.gif");
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}

table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}

table.tablesorter tbody tr.odd td {
  background-color: #F0F0F6;
}

table.tablesorter thead tr .headerSortUp {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-asc.gif");
}

table.tablesorter thead tr .headerSortDown {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/css/images/black-desc.gif");
}

table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}

img {
  width: 32px;
  height: 32px;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  border-color: greenyellow;
}

.shadowbox {
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.6), -3px 4px 12px rgba(0, 0, 0, 0.5), -4px 6px 15px rgba(0, 0, 0, 0.4), -5px 8px 18px rgba(0, 0, 0, 0.3);
  margin: 50px;
  padding: 5px;
}

.boxshadowinset {
  box-shadow: inset -1px -3px 20px 5px rgba(0, 0, 0, 0.75);
}

h3 {
  text-shadow: 1px 1px 5px 5px white;
  padding: 8px;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  background-color: darkslateblue;
  text-align: center;
}


/*Downloaded from https://www.codeseek.co/vanderdrilu/leaderboard-react-XYrOKQ */
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 App = function (_Component) {
  _inherits(App, _Component);

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

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

    _this.state = { data: [],
      baseurl: "https://www.freecodecamp.org/" };
    return _this;
  }

  _createClass(App, [{
    key: "loadData",
    value: function loadData() {
      var _this2 = this;

      fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime?Origin=*').then(function (response) {
        return response.json();
      }).then(function (data) {
        _this2.setState({ data: data });
      }).catch(function (err) {
        return console.error(_this2.props.url, err.toString());
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadData();
    }
  }, {
    key: "render",
    value: function render() {
      var _state = this.state,
          data = _state.data,
          baseurl = _state.baseurl;

      return React.createElement(
        "div",
        { className: "App" },
        React.createElement("header", { className: "App-header" }),
        React.createElement(
          "div",
          { className: "container shadowbox" },
          React.createElement(
            "h3",
            { className: " tablecolor boxshadowinset" },
            "Leaderboard"
          ),
          React.createElement(
            "table",
            { "class": " table-hover tablesorter", id: "myTable" },
            React.createElement(
              "thead",
              null,
              React.createElement(
                "tr",
                null,
                React.createElement(
                  "th",
                  null,
                  "#"
                ),
                React.createElement(
                  "th",
                  null,
                  "Campername"
                ),
                React.createElement(
                  "th",
                  null,
                  "Points in past 30 days"
                ),
                React.createElement(
                  "th",
                  null,
                  "All time points "
                )
              )
            ),
            React.createElement(
              "tbody",
              null,
              data.map(function (object, i) {

                var element = data[i];

                var username = element.username;

                var x = 0;
                x = Number(i) + 1;

                var userurl = { baseurl: baseurl } + { username: username };
                return React.createElement(
                  "tr",
                  { key: i },
                  React.createElement(
                    "td",
                    { className: "{sorter: false}" },
                    React.createElement(
                      "p",
                      null,
                      " ",
                      x,
                      " "
                    ),
                    " "
                  ),
                  React.createElement(
                    "td",
                    null,
                    React.createElement("img", { src: element.img, alt: "" }),
                    " ",
                    React.createElement(
                      "a",
                      { href: userurl, target: "_blank" },
                      element.username,
                      "  "
                    )
                  ),
                  React.createElement(
                    "td",
                    null,
                    " ",
                    element.recent
                  ),
                  React.createElement(
                    "td",
                    null,
                    " ",
                    element.alltime
                  )
                );
              })
            )
          )
        )
      );
    }
  }]);

  return App;
}(Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
/*$(document).ready(function () {
            setTimeout(function () {init();},2000);
            function init(){
           
            $.tablesorter.addWidget({
              id: "numbering",
              format: function(table) {
                  var c = table.config;
                  $("tr:visible", table.tBodies[0]).each(function(i) {
                      $(this).find('td').eq(0).text(i + 1);
                  });
              }
            });
            
            $("table").tablesorter({
              // prevent first column from being sortable
              headers: {
                  0: { sorter: false }
              },
              // apply custom widget
              widgets: ['numbering']
            });
            }
            });*/

Comments