Assignment 8

Sorting

by dhizzybusy

HTML

<input type="text" id="newItem" placeholder="New Value" />
<input type="button" id="addItem" value="Add" />
<input type="button" id="bubbleSort" value="Bubble Sort" />
<input type="button" id="insertionSort" value="Insertion Sort" />
<input type="button" id="clear" value="Clear" />

<div style="display:inline; width:50%; float: left;">
  <ul id="originalList">
    <p>
      Original List
    </p>
  </ul>
</div>
<div style="display:inline; width:50%">
  <ul id="sortedList">

    <p id="message">
      Sorted List
    </p>
  </ul>
</div>

JavaScript

values = new Array([]); // to store the original strings

// to generate random strings of length len
function randomString(len) {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  for (var i = 0; i < len; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

// to populate the original list
function populateList() {
  var originalList = document.getElementById("originalList");
  for (var i = 0; i < 20; i++) {
    var li = document.createElement('li');
    li.innerHTML = randomString(10);
    values.push(li.innerHTML);
    originalList.append(li);
  }
}

populateList();

// On add new item
document.getElementById("addItem").addEventListener("click", function() {
  var itemContent = document.getElementById("newItem").value;
  if ((itemContent == null) || (itemContent == "")) {
    alert("Cannot add empty values");
    return;
  }

  var originalList = document.getElementById("originalList");
  var li = document.createElement('li');
  li.innerHTML = itemContent;

  values.push(li.innerHTML);

  originalList.append(li);
});

// to empty the sorted list
function emptySortedList() {
  var lis = document.querySelectorAll('#sortedList li');
  for (var i = 0; li = lis[i]; i++) {
    li.parentNode.removeChild(li);
  }
}

// to fill the sorted list with values
function fillSortedList(values) {
  var sortedList = document.getElementById("sortedList");
  for (var i = 0; i < values.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = values[i];
    sortedList.append(li);
  }
}

// on bubble sort
document.getElementById("bubbleSort").addEventListener("click", function() {
  emptySortedList();

  // bubble sort
  var result = bubbleSort(values);

  fillSortedList(result);
});

// on insertion sort
document.getElementById("insertionSort").addEventListener("click", function() {
  emptySortedList();

  // insertion sort
  var result = insertionSort(values);

  fillSortedList(result);
});

// on...