FreeCodeCamp Leader Board

Developer
Bob Sutton
Size
3,568 Kb
Views
24,288
  1. FreeCodeCamp Leader Board Previews
  2. FreeCodeCamp Leader Board HTML Codes
  3. FreeCodeCamp Leader Board CSS Codes
  4. FreeCodeCamp Leader Board JS Codes

How do I make an freecodecamp leader board?

What is a freecodecamp leader board? How do you make a freecodecamp leader board? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

FreeCodeCamp Leader Board Previews
IQ Test

FreeCodeCamp Leader Board - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp Leader Board</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://fonts.googleapis.com/css?family=Orienta'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="title-block"> <img id="free-code-camp-icon" src="https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg" height="50px" /><br /> <span id="title-text">Leader Board</span>
</div>
<div class="container"> <div class="row"> <div class="col-4-sm"></div> <div class="col-4-sm"> <div id="table"></div> </div> <div class="col-4-sm"></div> </div>
</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='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp Leader Board - Script Codes CSS Codes

body { font-family: Orienta;
}
#title-block { background-color: green; height: 110px; text-align: center; padding-top: 5px;
}
#title-text { color: white; font-size: 40px;
}
table { margin-top: 20px;
}
.username-cell img { margin-right: 10px;
}
.cell { padding-top: 13px;
}

FreeCodeCamp Leader Board - Script Codes JS Codes

function formatNbr(n)
{ return (n < 10 ? "0" : "") + n;
}
function formatDate(date)
{ date = new Date(date); return date.getFullYear() + "/" + formatNbr(date.getMonth() + 1) + "/" + formatNbr(date.getDate()) + " " + formatNbr(date.getHours()) + ":" + formatNbr(date.getMinutes()) + ":" + formatNbr(date.getSeconds());
}
/*
Table code adapted from examples in "React Up & Running" by Stoyan Stefanov.
*/
var Table = React.createClass(
{ propTypes: { initialData: React.PropTypes.array }, getInitialState: function() { return { data: this.props.initialData, sortby: null, descending: false }; }, _sort: function(e) { var column = e.target.cellIndex; var data = this.state.data.slice(); var descending = this.state.sortby === column && !this.state.descending; if (column === 0) { data.sort(function(a, b) { if (descending) return (a[column].username < b[column].username ? 1 : -1); return (a[column].username > b[column].username ? 1 : -1); }); } else if (column === 3) { data.sort(function(a, b) { var x = new Date(a[column]); var y = new Date(b[column]); x = x.getFullYear() * 10000000000 + x.getMonth() * 100000000 + x.getDate() * 1000000 + x.getHours() * 10000 + x.getMinutes() * 100 + x.getSeconds(); y = y.getFullYear() * 10000000000 + y.getMonth() * 100000000 + y.getDate() * 1000000 + y.getHours() * 10000 + y.getMinutes() * 100 + y.getSeconds(); if (descending) return y - x; return x - y; }); } else { data.sort(function(a, b) { if (descending) return (a[column] < b[column] ? 1 : -1); return (a[column] > b[column] ? 1 : -1); }); } this.setState({ data: data, sortby: column, descending: descending, }); }, render: function() { return ( React.DOM.table({ className: "table table-striped table-bordered" }, React.DOM.thead({onClick: this._sort}, React.DOM.tr(null, ["User", "Recent", "All Time", "Last Update"].map(function(title, idx) { if (this.state.sortby === idx) title += this.state.descending ? ' \u2191' : ' \u2193' return React.DOM.th({key: idx}, title); }, this) ) ), React.DOM.tbody(null, this.state.data.map(function(row, idx) { return (React.DOM.tr({ key: idx }, row.map(function(cell, idx) { if (idx === 0) { return React.DOM.td(null, React.DOM.div({ className: "username-cell"}, React.DOM.img({ className: "img-thumbnail", src: cell.img, width: "50px", height: "50px" }),cell.username)); } if (idx === 3) { return React.DOM.td(null, React.DOM.div({ className: "cell" }, formatDate(cell))); } return React.DOM.td(null, React.DOM.div({ className: "cell" }, cell)); }) )); }) ) ) ); }
});
var TableComponent = ReactDOM.render( React.createElement(Table, { initialData: [], }), document.getElementById("table")
);
$.ajax(
{ url: "https://fcctop100.herokuapp.com/api/fccusers/top/recent", method: "GET", dataType: "json", // Cross-domain "jsonp" is not needed for some reason. success: function(json) { var newData = json.map(function(obj) { var userInfo = { username: obj.username, img: obj.img }; return [userInfo, obj.recent, obj.alltime, obj.lastUpdate]; }); TableComponent.setState({ data: newData }); }, error: function(jqXHR, textStatus, errorThrown) { window.alert(textStatus + ": " + errorThrown); }
});
FreeCodeCamp Leader Board - Script Codes
FreeCodeCamp Leader Board - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 3,568 Kb
Views 24,288
Do you need developer help for FreeCodeCamp Leader Board?

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!

Bob Sutton (anischyros) Script Codes
Name
Contiguity Graph of Countries
Life in a Dungeon
Twitchy Twitch.tv User Display
Worldwide Meteor Strikes Map
U.S. Gross Domestic Product of the United States
Git Markup Language Editor
Wikipedia Lookup Page
The Recipe Engine
Winston Churchill
The Mark Twain Random Quote Machine
Create amazing video scripts 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!