JSFiddle - React, Tailwind, and code Playground

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 id="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 buttonContainer = document.getElementById('button-group')

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

let currentOrder = orderFunctions.ascendingByValue

buttonContainer.addEventListener('click', (e) => {
  // Dont sort if empty space in the parent element has been clicked insted of the buttons
  if (e.target.id == "button-group") return;

  currentOrder = orderFunctions[e.target.dataset.order]
  order()
})

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