Camper Leaderboard

Developer
Beau Carnes
Size
4,550 Kb
Views
28,336
  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 Beau Carnes on 13 September 2022, Tuesday.

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='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"><h1>FreeCodeCamp Leaderboard</h1></div>
<div id="container" class="center">
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://fb.me/react-15.1.0.js'></script>
<script src='https://fb.me/react-dom-15.1.0.js'></script> <script src="js/index.js"></script>
</body>
</html>

Camper Leaderboard - Script Codes CSS Codes

body { background-color: gray;
}
h1 { font-family: georgia; text-align: center; color: white;
}
.center { width: 600px; float: none; margin: auto; margin-top: 30px;
}
img { border: 2px solid black;
}
.points { text-align: center;
}
table { width: 600px; background-color: lightgray; font-size: 15px;
}
thead { background-color: lightgreen;
}
.order { text-decoration: underline; color: darkblue; cursor: pointer;
}
.recent { background-color: lightblue;
}

Camper Leaderboard - Script Codes JS Codes

"use strict";
var number = 0;
var UserRow = React.createClass({ displayName: "UserRow", render: function render() { number++; var username = this.props.user.username; var link = "https://www.freecodecamp.com/" + username; return React.createElement( "tr", null, React.createElement( "td", null, number ), React.createElement( "td", null, React.createElement( "a", { href: link, target: "_blank" }, React.createElement("img", { src: this.props.user.img, alt: "user avatar", height: "50", width: "50" }), " ", username ) ), React.createElement( "td", { className: "points" }, this.props.user.recent ), React.createElement( "td", { className: "points" }, this.props.user.alltime ) ); }
});
var UserTable = React.createClass({ displayName: "UserTable", changeOrderRecent: function changeOrderRecent() { number = 0; this.props.order(this.refs.recent.value); $(".recent").css("background-color", "lightblue"); $(".alltime").css("background-color", "lightgreen"); }, changeOrderAlltime: function changeOrderAlltime() { number = 0; this.props.order(this.refs.alltime.value); $(".alltime").css("background-color", "lightblue"); $(".recent").css("background-color", "lightgreen"); }, render: function render() { var rows = []; var filterText = this.props.filterText; this.props.users.forEach(function (user) { if (user.username.indexOf(filterText) === -1) { return; } rows.push(React.createElement(UserRow, { user: user, key: user.username })); }); return React.createElement( "table", { className: "table table-striped table-bordered" }, React.createElement( "thead", null, React.createElement( "tr", null, React.createElement( "th", null, "#" ), React.createElement( "th", null, "Camper Name" ), React.createElement( "th", { className: "order recent" }, React.createElement( "div", { tabindex: "1", ref: "recent", value: "recent", onClick: this.changeOrderRecent }, "Points in past 30 days" ) ), React.createElement( "th", { className: "order alltime" }, React.createElement( "div", { tabindex: "2", ref: "alltime", value: "alltime", onClick: this.changeOrderAlltime }, "All time points" ) ) ) ), React.createElement( "tbody", null, rows ) ); }
});
var SearchBar = React.createClass({ displayName: "SearchBar", handleChange: function handleChange() { this.props.onUserInput(this.refs.filterTextInput.value); }, render: function render() { return React.createElement( "form", null, React.createElement("input", { type: "text", placeholder: "Search by name...", value: this.props.filterText, ref: "filterTextInput", onChange: this.handleChange }), React.createElement("p", null) ); }
});
var FilterableUserTable = React.createClass({ displayName: "FilterableUserTable", getInitialState: function getInitialState() { return { filterText: '', users: RECENT }; }, setOrder: function setOrder(order) { if (order == "alltime") this.setState({ users: ALLTIME }); if (order == "recent") this.setState({ users: RECENT }); }, handleUserInput: function handleUserInput(filterText) { this.setState({ filterText: filterText }); }, render: function render() { number = 0; return React.createElement( "div", null, React.createElement(SearchBar, { filterText: this.state.filterText, onUserInput: this.handleUserInput }), React.createElement(UserTable, { filterText: this.state.filterText, order: this.setOrder, users: this.state.users }) ); }
});
var RECENT = [];
var ALLTIME = [];
$.getJSON('https://fcctop100.herokuapp.com/api/fccusers/top/alltime', function (data) { ALLTIME = data;
});
$.getJSON('https://fcctop100.herokuapp.com/api/fccusers/top/recent', function (data) { RECENT = data; ReactDOM.render(React.createElement(FilterableUserTable, null), document.getElementById('container'));
});
Camper Leaderboard - Script Codes
Camper Leaderboard - Script Codes
Home Page Home
Developer Beau Carnes
Username beaucarnes
Uploaded September 13, 2022
Rating 3
Size 4,550 Kb
Views 28,336
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!

Beau Carnes (beaucarnes) Script Codes
Name
Cookies vs local storage vs session storage
Common Array Methods
Data Types
Weather app
Calculator
DOM Events
Hoisting
Wikipedia Viewer
Array iteration
Recipe Box
Create amazing marketing copy 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!