My Practice Sorting Algorithms

My learning of basic algorithms

by Austin Anderson

HTML

<button onclick="getNewCards()">
Get Cards
</button>

<button onclick="sortCards()">
Sort Cards
</button>

<label>Card Amount</label>
<input id="cardAmount" value="500" />

<div class="sortinglist">
  <div id="initialList"></div>
  <div id="selectionList"></div>
  <div id="bubbleList"></div>
  <div id="insertionList"></div>
  <div id="mergeList"></div>
</div>

CSS

.sortinglist {
  height: 500px;
  width: 500px;
  overflow:auto;
}

.sortinglist > div {
  display:inline-block;
  border-right: 1px solid black;
}

.time {
  text-align:center;
  font-weight:bold;
}

td {
  text-align: center;
}

tr[type=red] {
  background: #FF9999;
}
tr[type=green] {
  background: #99FF99;
}
tr[type=yellow] {
  background: #FFFF99;
}
tr[type=blue] {
  background: #99CCFF;
}
tr[type=purple] {
  background: #CC99FF;
}

JavaScript

var randomCards = [];
var start, end, time, i, j, cardAmount;
var test1, test2;

function resetCards() {
  $("div[id$='List']").html('');
  randomCards.length = 0;
}

function getNewCards() {
  resetCards();
  var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
  var types = ['red','blue','green','yellow','purple'];
  var card = {};
  var time = '0';
  cardAmount = $('#cardAmount').val();
  if (cardAmount === '' || !Number(cardAmount)) {
    return;
  }
  for (i = 0; i < Number(cardAmount); i++) {
    card = {
      number: null,
      type: null
    };
    card.number = numbers[Math.floor((Math.random() * 15))];
    card.type = types[Math.floor((Math.random() * 5))];
    randomCards.push(card);
  }
  
  displayCards('initial', time, randomCards);
}

function displayCards(id, time, cards) {
  var tableBuilder = '<div class="time">' + parseFloat(time).toFixed(5) + '</div>';
  tableBuilder+='<table cellspacing="0"><tr><th colspan="2">' + id + '</th></tr>';
  
  cards.forEach(function(card) {
    tableBuilder+= '<tr type="' + card.type + '"><td>' + card.type + '</td><td>' + card.number + '</td></tr>';
  });
  tableBuilder+= '</table>';
  $('#'+id+'List').html(tableBuilder);
}

function sortCards() {
  cardAmount = $('#cardAmount').val();
  if (cardAmount === '' || !Number(cardAmount) || !randomCards.length) {
    return;
  }
  
  var sorted = [];
  // SELECTION
  start = performance.now();
  sorted = selectionSort();
  end = performance.now(); 
  time = end - start;
  displayCards('selection', time, sorted);
  
  //BUBBLE
  start = performance.now();
  sorted = bubbleSort();
  end = performance.now(); 
  time = end - start;
  displayCards('bubble', time, sorted);
  
  //INSERTION
  start = performance.now();
  sorted = insertionSort();
  end = performance.now(); 
  time = end - start;
  displayCards('insertion', time, sorted);

	//MERGE
  var cards = randomCards.slice(); 
  start = performance.now();
  sorted = mergeSort(cards);
  end = performance.now(); 
  time =...