How to sort an array of HTML elements with JS – Blancer.com Tutorials and projects

I want to sort an array of HTML elements. I want to sort them by the css left property value. That means that the element with the lowest left value is the first element of the array that I want to sort and the element with the highest left value is the last element of the array that I want to sort.

HTML:

<html>
 <body>
   <div class="games"></div>
   <div class="games"></div>
   <div class="games"></div>
 </body>
</html>

CSS:

.games {
  position: absolute;
  transform: scale(1);
  transition: left 0.4s ease;
  width: 20vw;
  height: 20vw;
  border-radius: 2.5vw;
  background-color: white;
  display: flex;
  justify-content: center;
}

.games:nth-of-type(1) {
  left: 6.5vw;
}

.games:nth-of-type(2) {
  left: 40;
}

.games:nth-of-type(3) {
  left: calc(100vw - 6.5vw - 20vw); /* same position if you write: right: 6.5vw*/
}

JS:

const games = document.querySelectorAll('.games');

games.sort((a, b) => {return parseInt(window.getComputedStyle(a).getPropertyValue('left') - parseInt(window.getComputedStyle(b).getPropertyValue('left')})

If somebody gives me an answer, please don’t give me an answer with jquery, because I don’t know anything in jquery.