Creating a dynamic LeaderBoard with profile pictures

Question

I want to find a way to create a leaderboard like one below that uses variables to hold Users Points on Javascript in order to respond to changes to those points with changing users Ranks...

Here is what I'm trying to achieve:

I just want to manually fill in User's Points Data using only Javascript Variables... all the Data would come from a javascript array.

Something like :

   user_1 = Nilesh S;
   user_2 = Shristi_S; 

   user_1 points = 1710;
   user_2 points = 1710;

   etc...

Obviously, If I change Nilesh S (user_1) points to 1000 then Nilesh S rank will be 10th...

What I achieved for now is just creating those circle profile pictures :)

Here are the codes:

Javascript:

var img = document.createElement("IMG");
  img.setAttribute("src", "img_pulpit.jpg");
  img.setAttribute("width", "300");
  img.setAttribute("height", "300");
  img.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(img);

HTML:

<div id="IMG">
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">
  [1]: https://i.stack.imgur.com/zXm4N.png

CSS:

img {
      background: #2f293d;

   border: 1px solid #2f293d;
   padding: 6px;
   border-radius: 50%;
   box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);

}

Any Solution will be greatly appreciated.

Where is all the data coming from? A database? Are you using a server language like PHP on the backend? — dmikester1, Mar 02 '19 at 20:26
No, I just inject Data using Javascript Variables or something like an array which holds those data — Sara Ree, Mar 02 '19 at 20:29
So for now you are just putting dummy data that you manually fill in with JS? — dmikester1, Mar 02 '19 at 20:31
Yes...:) it's complicated to explain why I'm going to do that... — Sara Ree, Mar 02 '19 at 20:33
Here is a start. This code will generate an array of 20 random numbers between 0 and 2000. `let scores = Array.from({length: 20}, () => Math.floor(Math.random() * 2000)); console.log(scores);` — dmikester1, Mar 02 '19 at 20:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189330/discussion-between-dmikester1-and-sara-ree). — dmikester1, Mar 02 '19 at 20:41
Sara, can you answer a couple of my questions so I know how to proceed? — dmikester1, Mar 02 '19 at 21:05

score 0 · Accepted Answer · answered Mar 02 '19 at 21:48

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 objects
let 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 first
profiles.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 dynamic LeaderBoard with profile pictures

1 Answers1