FCC Leaderboard - vanilla JS
How do I make an fcc leaderboard - vanilla js?
What is a fcc leaderboard - vanilla js? How do you make a fcc leaderboard - vanilla js? This script and codes were developed by Sky on 29 January 2023, Sunday.
FCC Leaderboard - vanilla JS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Leaderboard - vanilla JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <table class="table"> <thead class="hide"> <tr> <th>#</th> <th class="user">User</th> <th onclick="showData('recent')">Recent</th> <th onclick="showData('alltime')">All Time</th> </tr> </thead> <tbody id="results"></tbody> </table>
</div> <script src="js/index.js"></script>
</body>
</html>
FCC Leaderboard - vanilla JS - Script Codes CSS Codes
body { background-image: -webkit-linear-gradient( 315deg, #3C8CE7 10%, #00EAFF 100%); background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%); font-family: sans-serif; min-height: 100vh; min-width: 280px; padding: 0; max-width: 100%;
}
.table { border-collapse: collapse; margin: 50px auto; max-width: 750px; width: 100%; margin-bottom: 1rem; color: #fff; background-color: #212529;
}
.table thead th { border-bottom-width: 3px; cursor: pointer;
}
.table thead th:nth-child(1),
.table thead th:nth-child(2) { cursor: auto;
}
.table th,
.table td { border: 1px solid #32383e; padding: 0.75rem; vertical-align: middle; text-align: center;
}
.table tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.05);
}
.table tbody tr:hover { background-color: rgba(255, 255, 255, 0.075);
}
.table td a { text-decoration: none; color: inherit;
}
.table td a:hover { text-decoration: underline;
}
.table .user { text-align: left;
}
.table tbody .user:hover { cursor: pointer; text-decoration: underline;
}
.table img { border-radius: 50%; margin-right: 1em; vertical-align: middle; width: 64px;
}
@media (max-width: 500px) { .table img { display: none; }
}
.wrapper { margin-right: auto; margin-left: auto; width: 100%;
}
@media (min-width: 576px) { .wrapper { max-width: 540px; }
}
@media (min-width: 768px) { .wrapper { max-width: 720px; }
}
@media (min-width: 1200px) { .wrapper { max-width: 1140px; }
}
FCC Leaderboard - vanilla JS - Script Codes JS Codes
function showData(data) { let tableHTML = ""; JSON.parse(sessionStorage.getItem(data)).forEach((user, i) => tableHTML += `<tr><td>${i + 1}</td> <td class="user" onclick="window.open('https://freecodecamp.org/${user.username}')"> <img height="64" src="${user.img}">${user.username}</td> <td>${user.recent}</td><td>${user.alltime}</td></tr>` ); results.innerHTML = tableHTML;
}
['alltime', 'recent'].forEach( sort => fetch('https://fcctop100.herokuapp.com/api/fccusers/top/' + sort) .then(res => res.json()) .then(data => sessionStorage.setItem(sort, JSON.stringify(data))) .then(() => {if(sort == 'alltime') showData('alltime')}));
Developer | Sky |
Username | skycoder |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 2,546 Kb |
Views | 4,048 |
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!
Name | Size |
Feather Icons | 2,918 Kb |
Portfolio - Work In Progress | 4,572 Kb |
Calculator | 4,133 Kb |
Search box that submits when you hit Enter | 2,459 Kb |
Media Queries | 2,045 Kb |
Use the Twitch.tv JSON API | 2,862 Kb |
Dark Sky - Simple 5-day Forecast | 4,941 Kb |
Vanilla JS Forismatic Example | 2,284 Kb |
Wikipedia Viewer | 3,538 Kb |
JSONP Examples with the Dark Sky API | 5,884 Kb |
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!
Name | Username | Size |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Template | Indra_z85 | 2,323 Kb |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Video mute | Leon9208 | 2,131 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!