With the help of another S.O user I was able to set up a sort of 'leaderboard' using JavaScript.
For Reference: https://jsfiddle.net/j1xcL0mj/
Being new to JS, I'm having trouble in working out, how to code it so that the 'Average' column, will automatically display the value inside the 'Average' column - from the equation ('Score' divided by 'Count').
I know how I'd go about doing it if there were text fields people could input numbers into, followed by a calculate button e.g.
num1 = document.getElementById("score").value;
num2 = document.getElementById("count").value;
document.getElementById("average").innerHTML = num1 / num2;
Add the following code to your script:
var avgEl = document.querySelectorAll('.average');
avgEl.forEach(function(el, i){
var score = el.parentElement.querySelector('.score').innerHTML;
var count = el.parentElement.querySelector('.count').innerHTML;
var average = parseFloat(score) * count;
el.innerHTML = average.toFixed(2);
});
Working Snippet:
document.addEventListener('DOMContentLoaded', () => {
let elements = []
let container = document.querySelector('#innercontain')
// 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))
})
var avgEl = document.querySelectorAll('.average');
avgEl.forEach(function(el, i){
var score = el.parentElement.querySelector('.score').innerHTML;
var count = el.parentElement.querySelector('.count').innerHTML;
var average = parseFloat(score) * count;
el.innerHTML = average.toFixed(2);
});
#outercontain {
width: 600px;
height: auto;
background-color: #f2f2f2;
text-align: center;
}
#innercontain {
position: relative;
display: inline-block;
vertical-align: top;
width:90%;
}
#rank {
position: relative;
display: inline-block;
width: 10%;
}
#titlerow, .row, .ranknumber {
border-bottom: 1px solid #000;
}
.title {
position: relative;
display: inline-block;
width: 22.5%;
}
.title:first-child {
width: 10%;
}
.player, .count, .score, .average {
position: relative;
display: inline-block;
width: 25%;
}
.height {height:100%;max-height:45px;line-height:45px;}
.row:nth-child(1), .ranknumber:nth-child(1) {
background: gold;
}
.row:nth-child(2), .ranknumber:nth-child(2) {
background: #c0c0c0;
}
.row:nth-child(3), .ranknumber:nth-child(3) {
background: #cd7f32;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="outercontain">
<div id="titlerow"><div class="title height">RANK</div><div class="title height">PLAYER</div><div class="title height">SCORE</div><div class="title height">COUNT</div><div class="title height">AVERAGE</div>
</div>
<div id="rank">
<div class="ranknumber height">1.</div>
<div class="ranknumber height">2.</div>
<div class="ranknumber height">3.</div>
<div class="ranknumber height">4.</div>
<div class="ranknumber height">5.</div>
</div><div id="innercontain">
<div class="row">
<div class="player height">Player1</div><div class="score height">310</div><div class="count height">3</div><div class="average height"></div>
</div>
<div class="row">
<div class="player height">Player2</div><div class="score height">458</div><div class="count height">3</div><div class="average height"></div>
</div>
<div class="row">
<div class="player height">Player3</div><div class="score height">423</div><div class="count height">3</div><div class="average height"></div>
</div>
<div class="row">
<div class="player height">Player4</div><div class="score height">985</div><div class="count height">3</div><div class="average height"></div>
</div>
<div class="row">
<div class="player height">Player5</div><div class="score height">567</div><div class="count height">3</div><div class="average height"></div>
</div>
</div>
</div>