Question

**Need HTML and Javacript**

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.

Answer 1

1). ANSWER :

GIVENTHAT :

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:

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] + "\n";

}

  

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

};

}();

SAMPLE OUTPUT: