Creating a Leaderboard in Html/Js

Creating a leaderboard in HTML/JS

Use objects! Each player its own object with associated properties such as "Name", "Date", and "Score".

So here's how it would work.
Note: I stole html and css from @itodd

I know your prob going to anyway, but PLEASE don't copy and paste. Anything in here you dont understand, please research until you understand COMPLETELY. By the end you should know about

Objects
Functions
forEach functions
Arrow functions
the DOM
+= operator
Arguments

I have specifically included the topics above so you will get the max out of this answer instead of just c&p. Please take the time to learn them.

 function Player(myName, myDate, myScore) {        this.name = myName;        this.date = myDate;        this.score = myScore;    }
    // Create new players    player1 = new Player("Thomas", "01/23/18", 201);    player2 = new Player("Michael", "03/24/17", 943);    player3 = new Player("Lisa", "06/04/18", 79); //Lisa needs to up her game    Players = [player1, player2, player3];
    function displayLeaderboard() {        let theExport = "";         Players.sort((aPlayer, bPlayer) => aPlayer.score - bPlayer.score);        Players.forEach((player) => theExport += '<tr><td>' + player.name + '</td><td>' + player.score + '</td></tr>');        document.getElementById("thingy").innerHTML = theExport; //Why have good ID's when you can have bad ones? | Who needs children when we can use innerHTML?    }
    displayLeaderboard(); //If you are not lazy (I am so I didn't do it) you will change this so you can pass an array of players. So it would be        displayLeaderboard(Players).

    table {        border-collapse: collapse;    }
    th,    td {        border: 1px solid #aaa;        padding: 5px;        text-align: left;    }

<table>    <thead>      <th>Player</th><th>Score</th>    </thead>    <tbody id="thingy"></tbody></table>

Creating a basic HTML/Javascript Leaderboard

You can make the first 3 rows the color you want by using nth-child()

/* Gold */
.row:nth-child(1) {background: gold;}
/* Silver */
.row:nth-child(2) {background: #c0c0c0;}
/* Bronze */
.row:nth-child(3) {background: #cd7f32;}

Next to sort the items you can put the rows into an array, then use sort to sort the items.

document.addEventListener('DOMContentLoaded', () => {  let elements = []  let container = document.querySelector('#container')  // Add each row to the array  container.querySelectorAll('.row').forEach(el => elements.push(el))  // Clear the container  container.innerHTML = ''  // Sort the array from highest to lowest  elements.sort((a, b) => b.querySelector('.score').textContent - a.querySelector('.score').textContent)  // Put the elements back into the container  elements.forEach(e => container.appendChild(e))})

#container {  width: 600px;  height: auto;}
.row {  position: relative;  display: block;  width: 100%;  height: 40px;  border-bottom: 1px solid #AFAFAF;}
.name {  position: relative;  display: inline-block;  width: 75%;  line-height: 45px;}
.score {  position: relative;  display: inline-block;  width: 25%;}
.row:nth-child(1) {  background: gold;}
.row:nth-child(2) {  background: #c0c0c0;}
.row:nth-child(3) {  background: #cd7f32;}

<div id="container">  <div class="row">    <div class="name">Player1</div><div class="score">430</div>  </div>
  <div class="row">    <div class="name">Player2</div><div class="score">580</div>  </div>
  <div class="row">    <div class="name">Player3</div><div class="score">310</div>  </div>
  <div class="row">    <div class="name">Player4</div><div class="score">640</div>  </div>
  <div class="row">    <div class="name">Player5</div><div class="score">495</div>  </div></div>

How to make a leaderboard ranking scores JavaScript

Try this: (others have permission to copy and edit this)

function load(){
  var userscores = {
    "ex1": 10,
    "noncy": 40,
    "del3tus": 24,
    "the_r0ck": 8,
    "MONSTER_OSITY": 120
  };
  var max = 0;
  var sorted = [];
  for(var prop in userscores){
    if(userscores[prop] >= max){
      max = userscores[prop];
    }
  }
  var cur = max;
  for(var i = max; i > 0; i--){
    for(var prop in userscores){
      if(userscores[prop] == i){
        sorted.push(prop);
      }
    }
  }
  var html = "";
  for(var i = 0; i < sorted.length; i++){
    html = "<tr><td>" + (i + 1) + "</td><td>" + sorted[i] + "</td><td>" + userscores[sorted[i]] + "</td></tr>";
    document.getElementById("leaderboard").innerHTML += html;
  }
}

<button onclick="load();">Load leaderboard</button>
<table id="leaderboard" border="1" cellSpacing="0px"><tr><th>#</th><th>Name</th><th>Points</th></tr></table>

Creating a dynamic LeaderBoard with profile pictures

Here is a quick and dirty way to create some dummy data in an objects array, sort it, and add it to the page.

// this is the array that will hold all the profile objectslet profiles = [];
let profile1 = {};profile1.name = "Jim Bob";profile1.points = 1500;profiles.push(profile1);
let profile2 = {};profile2.name = "Jane Smith";profile2.points = 1600;profiles.push(profile2);
let profile3 = {};profile3.name = "Mike Jones";profile3.points = 400;profiles.push(profile3);
let profile4 = {};profile4.name = "Sally Peterson";profile4.points = 1900;profiles.push(profile4);
// sort the array by points// b - a will make highest first, swap them so a - b to make lowest firstprofiles.sort(function(a, b) { return b.points-a.points;})
let profilesDiv = document.getElementsByClassName('profiles')[0];
profiles.forEach(function(entry) { let profile = document.createElement('div');    profile.className = "profile";    profile.textContent = entry.name + " -- " + entry.points; profilesDiv.appendChild(profile);});

.profile {  border: 2px solid #222222;  padding: 5px;  margin: 5px;  width: 50%;}

<div class="profiles">
</div>

Creating a Leaderboard in Html/Js