You will need to fork your JSFiddle for your List into a new

You will need to fork your JSFiddle for your List into a new Fiddle. In this Fiddle, we are going to add sorting functions. This is a great time to clean up your list with things that you have learned. You should automatically populate the List with 20 element (random strings). Once you have completed this - you will add 2 sort functions you can use any sort method that you desire for each of the sort functions. You can also delineate the functions by the name of the Sort function - so your functions might be QuickSort() and MergeSort() - if you chose to implement those 2 algorithms (you can select from any sort functions). The interface should have buttons to (1) Repopulate the list with Random strings. (2) Sort list with selected algorithm 1 (3) Sort list with selected algorithm 2 and (4) Insert a new random string entered by the user into the list. After each operation it should display the new list. The option 4 here will insert the new string entered by the user (you will need a check box) in the correct sorted position and you should print the new list with the new element on the screen. and-sorting. Assignment Grading - Creating a random string array is worth 1 point. Each sort algorithm is worth 3 points, and the insertion is worth 3 points.

Solution

Here is your answer jsfiddle https://jsfiddle.net/jwe2yh6p/

I am also pasting the source here:

HTML PART:

<button id=\"bRandom\">
Create Randomized String List
</button>
<button id=\"bIns\">
Insertion Sort
</button>
<button id=\"bQuick\">
Quick Sort
</button><hr/>
<button id=\"bnString\">
Insert new string
</button>
<input type=\"text\" id=\"newString\" placeholder=\"Enter String\">
<hr>
<textarea id=\"listArea\" cols = \"50\" rows=\"20\"></textarea>

JAVASCRIPT PART:

bQuick = document.getElementById(\"bQuick\");
bIns = document.getElementById(\"bIns\");
bRand = document.getElementById(\"bRandom\");
bnString = document.getElementById(\"bnString\");
newString = document.getElementById(\"newString\");

//adding event listeners
bRand.addEventListener(\"click\", createList);
bQuick.addEventListener(\"click\", sortQuick);
bIns.addEventListener(\"click\", sortIns);
bnString.addEventListener(\"click\", insertNew);

//list storage
var list = [];

function createList(){
list = [];
//populating list
   for(i=0;i<20;i++){
   var str = Math.random().toString(36).substring(10);
   list.push(str);
}
updateVisual();
}

function updateVisual(){
//update text area
   var data=\"\";
for(i=0;i<list.length;i++){
   data += list[i] + \"\ \";
}
  
   document.getElementById(\"listArea\").value = data;
}

function sortQuick(){
   Quick.sort(list);
updateVisual();
}

function sortIns(){
   insertionSort(list);
updateVisual();
}

function insertNew(){
   list.push(newString.value);
sortQuick();
}

function insertionSort(array)
{
for(var i = 1; i < array.length; ++i)
{
var item = array[i];
for(var j = i - 1; j >= 0; --j)
{
if(array[j] <= item) break;
array[j + 1] = array[j];
}
array[j + 1] = item;
}
return array;
}

var Quick= (function() {

function swap(array, indexA, indexB) {
var temp = array[indexA];
array[indexA] = array[indexB];
array[indexB] = temp;
}

function partition(array, pivot, left, right) {

var storeIndex = left,
pivotValue = array[pivot];

swap(array, pivot, right);

for(var v = left; v < right; v++) {
if(array[v] < pivotValue) {
swap(array, v, storeIndex);
storeIndex++;
}
}
swap(array, right, storeIndex);
return storeIndex;
}

function sort(array, left, right) {

var pivot = null;

if(typeof left !== \'number\') {
left = 0;
}

if(typeof right !== \'number\') {
right = array.length - 1;
}

if(left < right) {
  
pivot = left + Math.ceil((right - left) * 0.5);
newPivot = partition(array, pivot, left, right);

sort(array, left, newPivot - 1);
sort(array, newPivot + 1, right);
}

}

return {
sort: sort
};

})();