FCC Leaderboard

Developer
Victoria
Size
3,665 Kb
Views
12,144
  1. FCC Leaderboard Previews
  2. FCC Leaderboard HTML Codes
  3. FCC Leaderboard CSS Codes
  4. FCC Leaderboard JS Codes

How do I make an fcc leaderboard?

What is a fcc leaderboard? How do you make a fcc leaderboard? This script and codes were developed by Victoria on 02 December 2022, Friday.

FCC Leaderboard Previews
IQ Test

FCC Leaderboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Leaderboard</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='container'></div> <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="js/index.js"></script>
</body>
</html>

FCC Leaderboard - Script Codes CSS Codes

.table { width: 80%; margin: auto;
}
.table .centered-block { text-align: center;
}
.table .camper-img { height: 50px; margin: 0px 8px 0px 0px; border: 2px solid brown; border-radius: 20%;
}
.filter { cursor: pointer;
}
.filter:hover { text-decoration: underline;
}
.filter.clicked { color: blue;
}

FCC Leaderboard - Script Codes JS Codes

'use strict';
var RECENT = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';
var ALLTIME = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';
var Leaderboard = React.createClass({ displayName: 'Leaderboard', getInitialState: function getInitialState() { return { campers: [], filter: 'recent' }; }, getCampers: function getCampers(filter) { var _this = this; fetch(filter === 'all' ? ALLTIME : RECENT).then(function (res) { return res.json(); }).then(function (res) { _this.setState({ campers: res, filter: filter === 'all' ? 'all' : 'recent' }); }); }, componentWillMount: function componentWillMount() { this.getCampers(); }, render: function render() { var _this2 = this; return React.createElement( 'div', null, React.createElement( 'table', { className: 'table table-striped' }, React.createElement( 'thead', null, React.createElement( 'tr', null, React.createElement( 'th', { colSpan: '4', className: 'centered-block' }, 'Leaderboard' ) ), React.createElement( 'tr', null, React.createElement( 'th', null, '#' ), React.createElement( 'th', null, 'Camper Name' ), React.createElement( 'th', { className: 'centered-block filter ' + (this.state.filter === 'recent' ? 'clicked' : ''), onClick: function onClick() { return _this2.getCampers(); } }, 'Points in past 30 days' ), React.createElement( 'th', { className: 'centered-block filter ' + (this.state.filter === 'all' ? 'clicked' : ''), onClick: function onClick() { return _this2.getCampers('all'); } }, 'All time points' ) ) ), React.createElement( 'tbody', null, this.state.campers.map(function (camper, i) { return React.createElement( 'tr', { key: camper.username }, React.createElement( 'td', null, i + 1 ), React.createElement( 'td', null, React.createElement( 'a', { target: '_blank', href: 'https://www.freecodecamp.com/' + camper.username }, React.createElement('img', { className: 'camper-img', src: camper.img }), camper.username ) ), React.createElement( 'td', { className: 'centered-block' }, camper.recent ), React.createElement( 'td', { className: 'centered-block' }, camper.alltime ) ); }) ) ) ); }
});
ReactDOM.render(React.createElement(Leaderboard, null), document.getElementById('container'));
FCC Leaderboard - Script Codes
FCC Leaderboard - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 3,665 Kb
Views 12,144
Do you need developer help for FCC 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!

Victoria (Enieste) Script Codes
Name
FCC Wiki viewer
FCC Recipe Box
FCC Tribute page
FCC Twitchtv JSON API
FCC Pomodoro
D3 paths
FCC JS Calculator
A Pen by Victoria
React TODO
FCC Reacted Markdown
Create amazing captions 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!