Question

55

Creating a basic HTML/Javascript Leaderboard

rated 0 times [ 57] [ 2] / answers: 1 / hits: 26901 / 7 Years ago, thu, december 21, 2017, 12:00:00

Whether or not it's easily possible and done with Javascript I'm not sure but..

As shown in the code below, I've 5 players, each with a different score. I'm looking to code it so that it will automatically relist the players based off how high their score is. IDEALLY, I would also want to colour the first 3 rows to be gold-silver-bronze if that was possible.

Any help making this or pointing me in the right direction would be much appreciated. I'm not sure where I should start.

#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%;

}

<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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

angelr

Add To Favorites

Follow

Total Points: 399

Total Questions: 96

Total Answers: 101

Location: Finland

Member since Sun, May 21, 2023

1 Year ago

answered 7 Years ago reecep · Accepted Answer

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>