I am looking for a way to implement a dynamic leaderboard using JavaScript, where the Users Points are stored in variables and their ranks change automatically based on point updates...
Here is the desired outcome:
https://i.sstatic.net/uyCa8.png
The idea is to manually input the User's Points Data using JavaScript Variables, with all data sourced from a JavaScript array.
For example:
user_1 = Nilesh S;
user_2 = Shristi_S;
user_1 points = 1710;
user_2 points = 1710;
etc...
If I were to update Nilesh S (user_1) points to 1000, then Nilesh S rank would adjust accordingly to 10th...
Currently, I have managed to display circular profile pictures only :)
Below are the snippets of code:
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.sstatic.net/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 help or solution provided will be highly appreciated.