Sorting HTML elements with Javascript and Flexbox

by nijeesh4all

HTML

<div class="row">
  <div class="col" data-value="1" data-likes="2">
    one
    <span>Likes: 2</span>
  </div>
  <div class="col" data-value="3" data-likes="10">
    three
    <span>Likes: 10</span>
  </div>
  <div class="col" data-value="5" data-likes="1">
    five
    <span>Likes: 1</span>
  </div>
  <div class="col" data-value="200" data-likes="102">
    two hundred
    <span>Likes: 102</span>
  </div>
  <div class="col" data-value="4" data-likes="232">
    four
    <span>Likes: 232</span>
  </div>
  <div class="col" data-value="2" data-likes="12">
    two
    <span>Likes: 12</span>
  </div>
  <div class="col" data-value="400" data-likes="24">
    four hundred
    <span>Likes: 24</span>
  </div>
</div>

<div i="button-group">
  <button class="order" id="asc"     data-order="ascendingByValue">ASC BY VALUE</button>
  <button class="order" id="dec"     data-order="descendingByValue">DESC BY VALUE</button>
  <button class="order" id="decName" data-order="descendingByLikes">DESC BY LIKES</button>
  <button class="order" id="ascName" data-order="ascendingByLikes">ASC BY LIKES</button>
</div>

SCSS

.row {
  display: flex;
  flex-direction: column;
}

.col {
  padding: 20px;
  border: 1px solid gray;
  margin: 5px;
  order: 3;
  
  span{
    float: right;
    color: gray;
    font-size: 11px;
  }
}

JavaScript

const ascValButton = document.getElementById('asc')
const decValButton = document.getElementById('dec')
const ascLikeButton = document.getElementById('ascName')
const decLikeButton = document.getElementById('decName')


const ascendingByValue = (a, b) => a.dataset.value - b.dataset.value
const descendingByValue = (a, b) => b.dataset.value - a.dataset.value
const ascendingByLikes = (a, b) => a.dataset.likes - b.dataset.likes
const descendingByLikes = (a, b) => b.dataset.likes - a.dataset.likes


let currentOrder = ascendingByValue

ascValButton.addEventListener('click', () => {
  currentOrder = ascendingByValue
  order()
})


decValButton.addEventListener('click', () => {
  currentOrder = descendingByValue
  order()
})

ascLikeButton.addEventListener('click', () => {
  currentOrder = ascendingByLikes
  order()
})


decLikeButton.addEventListener('click', () => {
  currentOrder = descendingByLikes
  order()
})


const order = function() {
  const ordered = [...document.getElementsByClassName('col')].sort(currentOrder)
  ordered.forEach((elem, index) => {
    elem.style.order = index
  })
}


order()