ReactJS - Camper Leaderboard

Developer
Kévin Barfleur
Size
5,169 Kb
Views
2,024
  1. ReactJS - Camper Leaderboard Previews
  2. ReactJS - Camper Leaderboard HTML Codes
  3. ReactJS - Camper Leaderboard CSS Codes
  4. ReactJS - Camper Leaderboard JS Codes

How do I make an reactjs - camper leaderboard?

What is a reactjs - camper leaderboard? How do you make a reactjs - camper leaderboard? This script and codes were developed by Kévin Barfleur on 30 January 2023, Monday.

ReactJS - Camper Leaderboard Previews
IQ Test

ReactJS - Camper Leaderboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactJS - Camper Leaderboard</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ReactJS - Camper Leaderboard - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,500);
* { margin: 0; padding: 0; font-family: 'Quicksand', sans-serif;
}
.container-header { width: 100vw; height: 80px; background-color: lightblue;
}
.container-header h1 { font-family: 'Anton', sans-serif; width: 100%; text-align: center;
}
.container-header h3 { width: 100%; text-align: center;
}
.container-footer { width: 100vw; height: 40px; clear: both; opacity: .8; background-color: lightsalmon;
}
.container-footer p { width: 100%; text-align: center; padding-top: 10px; font-weight: bold;
}
.list { list-style-type: none; margin-top: 50px; margin-bottom: 50px;
}
.list .list-header { height: 50px;
}
.list .list-header div:nth-child(1) { font-weight: bold; width: 10%; float: left; text-align: center; font-size: 15px;
}
.list .list-header div:nth-child(2) { font-weight: bold; width: 50%; float: left; text-align: center; font-size: 15px;
}
.list .list-header button { font-weight: bold; width: 20%; float: left; text-align: center; border: none; border-radius: 20px; background-color: white; font-size: 15px; color: lightsalmon; transition: .3s;
}
.list .list-header button:hover { transition: .3s; color: lightblue; cursor: pointer;
}
.list .list-user { height: 50px;
}
.container-user { width: 100%; padding-top: 15px;
}
.container-user .propsClassment { width: 10%; text-align: center; float: left;
}
.container-user .propsPicture { width: 20%; text-align: center; float: left;
}
.container-user .propsPicture img { width: 40px; border-radius: 100%; transform: translateY(-10px) translateX(20px);
}
.container-user .propsUsername { width: 30%; text-align: left; float: left;
}
.container-user .propsAllday { width: 20%; text-align: center; float: left;
}
.container-user .propsRecent { width: 20%; text-align: center; float: left;
}

ReactJS - 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; }
/*************************************************** App Component
***************************************************/
var App = function (_React$Component) {	_inherits(App, _React$Component);	function App() {	_classCallCheck(this, App);	var _this = _possibleConstructorReturn(this, _React$Component.call(this));	_this.state = {	campers: []	};	return _this;	}	App.prototype.componentWillMount = function componentWillMount() {	this.getCampers30days();	};	App.prototype.getCampers30days = function getCampers30days() {	var _this2 = this;	var campers30days = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';	fetch(campers30days).then(function (response) {	return response.json();	}).then(function (data) {	return _this2.setState({ campers: data });	});	};	App.prototype.getCampersAlltime = function getCampersAlltime() {	var _this3 = this;	var campersAlltime = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';	fetch(campersAlltime).then(function (response) {	return response.json();	}).then(function (data) {	return _this3.setState({ campers: data });	});	};	App.prototype.render = function render() {	var alldayOutput = this.state.campers.map(function (user, index) {	return React.createElement(	'li',	{ className: 'list-user' },	React.createElement(User, { classment: index + 1,	userName: user.username,	picture: user.img,	allDay: user.alltime,	recent: user.recent })	);	});	return React.createElement(	'div',	null,	React.createElement(Header, null),	React.createElement(	'ul',	{ className: 'list' },	React.createElement(	'li',	{ className: 'list-header' },	React.createElement(	'div',	null,	'#'	),	React.createElement(	'div',	null,	'Camper Name'	),	React.createElement(	'button',	{ onClick: this.getCampers30days },	'Points in past 30 days'	),	React.createElement(	'button',	{ onClick: this.getCampersAlltime },	'All time points'	)	),	alldayOutput	),	React.createElement(Footer, null)	);	};	return App;
}(React.Component);
/*************************************************** User Component
***************************************************/
var User = function (_React$Component2) {	_inherits(User, _React$Component2);	function User() {	_classCallCheck(this, User);	return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));	}	User.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'container-user' },	React.createElement(	'div',	{ className: 'propsClassment' },	this.props.classment	),	React.createElement(	'div',	{ className: 'propsPicture' },	React.createElement('img', { src: this.props.picture })	),	React.createElement(	'div',	{ className: 'propsUsername' },	this.props.userName	),	React.createElement(	'div',	{ className: 'propsAllday' },	this.props.allDay	),	React.createElement(	'div',	{ className: 'propsRecent' },	this.props.recent	)	);	};	return User;
}(React.Component);
/*************************************************** Header Component
***************************************************/
var Header = function (_React$Component3) {	_inherits(Header, _React$Component3);	function Header() {	_classCallCheck(this, Header);	return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));	}	Header.prototype.render = function render() {	return React.createElement(	'div',	null,	React.createElement(	'div',	{ className: 'container-header' },	React.createElement(	'h1',	null,	'Free Code Camp'	),	React.createElement(	'h3',	null,	'Camper Leaderboard'	)	)	);	};	return Header;
}(React.Component);
/*************************************************** Footer Component
***************************************************/
var Footer = function (_React$Component4) {	_inherits(Footer, _React$Component4);	function Footer() {	_classCallCheck(this, Footer);	return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));	}	Footer.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'container-footer' },	React.createElement(	'p',	null,	'Made with Rhum in Guadeloupe'	)	);	};	return Footer;
}(React.Component);
/*************************************************** RENDER !
***************************************************/
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
ReactJS - Camper Leaderboard - Script Codes
ReactJS - Camper Leaderboard - Script Codes
Home Page Home
Developer Kévin Barfleur
Username kevin_barfleur
Uploaded January 30, 2023
Rating 3
Size 5,169 Kb
Views 2,024
Do you need developer help for ReactJS - 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!

Kévin Barfleur (kevin_barfleur) Script Codes
Name
ReactMeteoApp
ReactJS - Markdown Previewer
365JS - Clavier
365JS - Todolist
ReactJS - Todolist
365JS - 1 - Snake
Stylexemple
ReactJS - Portfolio
Create amazing art & images 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!