How to Create a Simple Leaderboard in Webflow with Slater

A ranking or leaderboard system can enhance engagement in Webflow projects, allowing you to display user scores, votes, or other competitive data. While there is no pre-made ranking script in the Slater community library, a custom solution can be easily created using localStorage.

Working Ranking Script Example

Below is a simple script that tracks and displays user scores in a descending leaderboard order. It utilizes localStorage to persist data in the browser.

javascript
// Example: Simple Ranking Script using localStorage

// Get current rankings or initialize as empty
function getRankings() {
const data = localStorage.getItem('rankings');
return data ? JSON.parse(data) : [];
}

// Add or update a user's score
function setScore(username, score) {
let rankings = getRankings();
const existing = rankings.findIndex(r => r.username === username);
if (existing !== -1) {
rankings[existing].score = score;
} else {
rankings.push({ username, score });
}
// Sort rankings descending
rankings.sort((a, b) => b.score - a.score);
localStorage.setItem('rankings', JSON.stringify(rankings));
}

// Render rankings to an element
function renderRankings(containerSelector) {
const rankings = getRankings();
const container = document.querySelector(containerSelector);
if (!container) return;
container.innerHTML = rankings
.map((r, i) => <div>${i + 1}. ${r.username}: ${r.score}</div>)
.join('');
}

// Usage examples:
setScore('Alice', 100);
setScore('Bob', 120);
setScore('Charlie', 90);

renderRankings('#leaderboard');

How to Use This Script

  1. Add the Script: Paste the script into a Slater code block in your Webflow project.

  2. Create a Leaderboard Element: Ensure your HTML includes an element with the ID leaderboard, such as:
    html

  3. Add or Update Scores: Use the function setScore(username, score) in your code or triggered by user events to add or update scores.

  4. Display the Rankings: Call renderRankings('#leaderboard') to update the displayed leaderboard.

Example:

javascript
setScore('Alice', 100);
setScore('Bob', 120);
setScore('Charlie', 90);
renderRankings('#leaderboard');

Customization Ideas

  • Add input forms and event listeners to allow users to submit or update their scores interactively.
  • Adjust the script to rank by other metrics, such as votes, times, or custom points.

For more advanced use-cases, additional logic and validation may be required.

Reference Scripts & Resources

Jared Malan