FCC: Camper Leaderboard

Developer
Jeanine
Size
5,425 Kb
Views
16,192
  1. FCC: Camper Leaderboard Previews
  2. FCC: Camper Leaderboard HTML Codes
  3. FCC: Camper Leaderboard CSS Codes
  4. FCC: Camper Leaderboard JS Codes

How do I make an fcc: camper leaderboard?

What is a fcc: camper leaderboard? How do you make a fcc: camper leaderboard? This script and codes were developed by Jeanine on 12 September 2022, Monday.

FCC: Camper Leaderboard Previews
IQ Test

FCC: Camper Leaderboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC: Camper Leaderboard</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Kaushan+Script'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app">
</div>
<footer><p>Coded with <span>&hearts;</span> by <a href="http://satinflame.com">satinflame design</a></p></footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js'></script>
<script src='http://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="js/index.js"></script>
</body>
</html>

FCC: Camper Leaderboard - Script Codes CSS Codes

body, html { background: #333;
}
html, body { background-color: #001; background-image: radial-gradient(#b54c68 15%, rgba(0, 0, 0, 0) 16%), radial-gradient(#ff9999 15%, rgba(0, 0, 0, 0) 16%); background-size: 30px 30px; background-position: 0 0, 15px 15px;
}
.container { max-width: 800px;
}
body { padding: 10px;
}
table img { width: 30px; height: 30px; padding: 1px; border: 1px solid #ccc; margin-right: 8px;
}
td, th { background: #fff;
}
table { border: 3px solid #000;
}
caption { color: #fff; font-size: 24px; padding: 10px; background: rgba(0, 0, 0, 0.5); margin-top: 10px; border: 5px solid #f99; border-bottom: 0;
}
.fancy { text-align: center; font-family: 'Kaushan Script';
}
#recent.active:after, #alltime.active:after { content: "\25bc"; float: right; font-size: 14px;
}
th#recent, th#alltime { width: 30%; cursor: pointer;
}
table th { font-family: 'Kaushan Script'; font-size: 1.6rem;
}
footer { color: #ccc; font-family: 'Kaushan Script'; text-align: center; background: rgba(0, 0, 0, 0.5); padding: 10px;
}
footer a, footer span { color: #b54c68;
}
table tr:first-of-type td { font-weight: bold; font-size: 1.8rem; border-top: 3px solid #b54c68; border-bottom: 3px solid #b54c68;
}
table.table-bordered.table td { vertical-align: middle;
}
table.table-bordered.table td:first-child { text-align: center;
}
table a { color: #b54c68;
}
#app table { border: 5px solid #f99;
}

FCC: Camper Leaderboard - Script Codes JS Codes

"use strict";
var Display = React.createClass({ displayName: "Display", getInitialState: function getInitialState() { return { users: [], orderby: "recent", orderbyprev: "alltime" }; this.onClick = this.handleClick.bind(this); this.getData(); }, handleClick: function handleClick(e) { //console.log("e " +e); var passedState = e; // what is clicke var orderState = this.state.orderby; // what it currently is if (passedState !== "alltime" && orderState === "alltime") { this.setState({ orderby: "recent", orderbyprev: "alltime" }); } else if (passedState !== "recent" && orderState === "recent") { this.setState({ orderby: "alltime", orderbyprev: "recent" }); } //this.getData(); //console.log('click: '+ this.state.orderby); }, getData: function getData() { $.ajax({ url: this.props.apiroot + this.state.orderby, dataType: 'json', cache: false, success: function (data) { var users = data; this.setState({ users: users }); }.bind(this), error: function (xhr, status, err) { console.error(this.props.apiroot, status, err.toString()); }.bind(this) }); }, componentDidMount: function componentDidMount() { this.getData(); }, componentDidUpdate: function componentDidUpdate() { this.getData(); }, render: function render() { var alltimeClass = this.state.orderby === "alltime" ? 'active' : ''; var recentClass = this.state.orderby === "recent" ? 'active' : ''; //console.log(this.state.orderby); return React.createElement( "div", { className: "editor container" }, React.createElement( "div", { className: "row" }, React.createElement( "div", { className: "markdown-input col-sm-12" }, React.createElement( "table", { className: "table-responsive table table-bordered" }, React.createElement( "caption", { className: "fancy" }, React.createElement("span", { className: "fa fa-free-code-camp", "aria-hidden": "true" }), " freeCodeCamp Leaderboard" ), React.createElement( "thead", null, React.createElement( "tr", null, React.createElement( "th", null, "Rank" ), React.createElement( "th", null, "Username" ), React.createElement( "th", { id: "recent", className: recentClass, onClick: this.handleClick.bind(this, "recent") }, "Points in the past 30 days" ), React.createElement( "th", { id: "alltime", className: alltimeClass, onClick: this.handleClick.bind(this, "alltime") }, "All-time Points" ) ) ), React.createElement(Output, { users: this.state.users }) ) ) ) ); }
});
var Output = React.createClass({ displayName: "Output", render: function render() { var count = 0; var userlist = this.props.users.map(function (user) { count++; return React.createElement(UserDetails, { user: user, key: user.username, img: user.img, username: user.username, recent: user.recent, alltime: user.alltime, count: count, apiroot: this.props.apiroot, updatePage: this.props.updatePage }); }.bind(this)); return React.createElement( "tbody", null, userlist ); }
});
function UserDetails(props) { return React.createElement( "tr", null, React.createElement( "td", null, props.count ), React.createElement( "td", null, React.createElement( "a", { href: "https://www.freecodecamp.com/" + props.username }, React.createElement("img", { src: props.img }), props.username ) ), React.createElement( "td", null, props.recent ), React.createElement( "td", null, props.alltime ) );
}
ReactDOM.render(React.createElement(Display, { apiroot: "https://fcctop100.herokuapp.com/api/fccusers/top/" }), document.getElementById("app"));
FCC: Camper Leaderboard - Script Codes
FCC: Camper Leaderboard - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 5,425 Kb
Views 16,192
Do you need developer help for FCC: 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!

Jeanine (virtual) Script Codes
Name
Bootstrap 4
Simple Event Box
Table Sorter Data
Parallax Cats
Expanding Info Boxes
3 Piece Slider
Font-Awesome Icon Card with heading
3 Piece Slider with featured center
Flexbox
Simple React Template
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!