Surprising Sort

Toggle class name on click in jQuery

HTML

Surprising Sort:
<div class="list" id="surprisinglist">
  
</div>

Bubble Sort:
<div class="list" id="bubblelist">
  
</div>
<button onclick="run()">
Sort
</button>

CSS

.list {
  position:relative;
  height:20px;
}

.entry {
  position:absolute;
  top:0;
  left:0;
  
  display:block;
  width:10px;
  height:10px;
  margin:2px;
  
  background-color:black;
}

JavaScript

const length = 20

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[array[i], array[j]] = [array[j], array[i]]
  }
  return array
}

function render(elements) {
  for (let i = 0; i < elements.length; i++) {
    elements[i].animate({ left: i * 12 + "px" },90)
  }
}

const surprisingelements = []
let bubbleelements = []
for (let i = 0; i < length; i++) {
  const opacity = i / length
  const $element = $(
    `<div id="box${i}" data-index="${i}" class="entry" style="opacity:${opacity}"></div>`,
  )
  surprisingelements.push($element)
  $("#surprisinglist").append($element)
}
shuffleArray(surprisingelements)
render(surprisingelements)

for (let i = 0; i < length; i++) {
  bubbleelements[i] = surprisingelements[i].clone()
  $("#bubblelist").append(bubbleelements[i])
}
render(bubbleelements)

async function runSurprisingSort() {
  for (let i = 0; i < length; i++) {
    for (let j = 0; j < length; j++) {
      await sleep(100)
      const $box1 = surprisingelements[i]
      const $box2 = surprisingelements[j]
      if (parseInt($box1.data("index")) < parseInt($box2.data("index"))) {
        surprisingelements[j] = $box1
        surprisingelements[i] = $box2
        render(surprisingelements)
      }
    }
  }
  $('#surprisinglist .entry').css('background-color','green');
}

async function runBubblesort() {
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - 1 - i; j++) {
      await sleep(100)
      const $box1 = bubbleelements[j]
      const $box2 = bubbleelements[j+1]
      if (parseInt($box1.data("index")) > parseInt($box2.data("index"))) {
        bubbleelements[j+1] = $box1
        bubbleelements[j] = $box2
        render(bubbleelements)
      }
    }
  }
  $('#bubblelist .entry').css('background-color','green');
}

async function run() {
  runSurprisingSort()
  runBubblesort()
}