Camper LeaderBoard

Developer
Matheus
Size
4,784 Kb
Views
2,024
  1. Camper LeaderBoard Previews
  2. Camper LeaderBoard HTML Codes
  3. Camper LeaderBoard CSS Codes
  4. Camper LeaderBoard JS Codes

How do I make an camper leaderboard?

What is a camper leaderboard? How do you make a camper leaderboard? This script and codes were developed by Matheus on 13 January 2023, Friday.

Camper LeaderBoard Previews
IQ Test

Camper LeaderBoard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camper LeaderBoard</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="leaderBoard"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Camper LeaderBoard - Script Codes CSS Codes

.camperPic { border: 2px solid #006400; border-radius: 5px;
}
.camperName { padding-left: 7px;
}
thead { font-size: 22px;
}
.tableLine { font-size: 20px;
}
.appHeader { height: 50px; background-color: #006400; color: white;
}
.tableTitle { padding-top: 6px; font-size: 25px;
}
.glyphicon-chevron-down { font-size: 15px; padding-left: 5px;
}
.glyphicon-chevron-down:hover { cursor: pointer;
}

Camper LeaderBoard - Script Codes JS Codes

"use strict";
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; }
//References:
//-http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/
//-https://facebook.github.io/react/docs/lists-and-keys.html
function dynamicTable(mode, callback) { axios.get("https://fcctop100.herokuapp.com/api/fccusers/top/" + mode).then(function (response) { console.log(response); // var jsxExpression = response.data.map(function (item, index) { return React.createElement( "tr", { key: item.username, className: "tableLine" }, React.createElement( "td", null, index + 1 ), React.createElement( "td", null, React.createElement("img", { className: "camperPic", src: item.img, width: "45", heigth: "45" }), React.createElement( "span", { className: "camperName" }, item.username ) ), React.createElement( "td", null, mode == "alltime" ? item.alltime : item.recent ) ); }); callback(jsxExpression); });
}
var LeaderBoard = function (_React$Component) { _inherits(LeaderBoard, _React$Component); function LeaderBoard(props) { _classCallCheck(this, LeaderBoard); var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this2.state = { camperData: [], exhibitionMode: 'all time' }; _this2.switchMode = _this2.switchMode.bind(_this2); return _this2; } LeaderBoard.prototype.switchMode = function switchMode(event) { var _this = this; if (this.state.exhibitionMode == "all time") { dynamicTable("recent", function (response) { _this.setState({ camperData: response, exhibitionMode: "recent" }); }); } else { dynamicTable("alltime", function (response) { _this.setState({ camperData: response, exhibitionMode: "all time" }); }); } }; LeaderBoard.prototype.componentDidMount = function componentDidMount() { var _this = this; dynamicTable("alltime", function (response) { _this.setState({ camperData: response }); }); }; LeaderBoard.prototype.render = function render() { return React.createElement( "div", { className: "container" }, React.createElement( "div", { className: "row" }, React.createElement( "div", { className: "text-center" }, React.createElement("img", { width: "100%", src: "https://www.freecodecamp.org/design-style-guide/downloads/freeCodeCamp.jpg" }) ) ), React.createElement( "div", { className: "row" }, React.createElement("br", null), React.createElement("br", null), React.createElement( "div", { className: "col-md-6 col-md-offset-3 text-center appHeader" }, React.createElement( "div", { className: "tableTitle" }, "Leaderboard: ", this.state.exhibitionMode, React.createElement("span", { onClick: this.switchMode, className: "glyphicon glyphicon-chevron-down", "aria-hidden": "true" }) ) ), React.createElement( "div", { className: "col-md-6 col-md-offset-3" }, React.createElement( "table", { className: "table table-striped" }, React.createElement( "thead", null, React.createElement( "tr", null, React.createElement( "th", null, "#" ), React.createElement( "th", null, "CamperName" ), React.createElement( "th", { align: "center" }, "Points" ) ) ), React.createElement( "tbody", null, this.state.camperData ) ) ) ) ); }; return LeaderBoard;
}(React.Component);
ReactDOM.render(React.createElement(LeaderBoard, null), document.getElementById('leaderBoard'));
Camper LeaderBoard - Script Codes
Camper LeaderBoard - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded January 13, 2023
Rating 3
Size 4,784 Kb
Views 2,024
Do you need developer help for Camper LeaderBoard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matheus (MatheusLima92) Script Codes
Name
Game of Life
Quote Machine
Tic-Tac-Toe Game - v3
Simon Game
Alumni ECA
Javascript Calculator
Recipe Box
A Pen by Matheus
Voting App - register
VotingApp - Authenticated
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!