JSFiddle - React, Tailwind, and code Playground

by HSilvaDaytona

HTML

<input type="button" id="reload" value="Randomized Strings List" />
<p />
<input type="text" id="newItem" />
<input type="button" id="addItem" value="Insert String" />
<p />
<input type="button" id="bubbleSort" value="bubble" />
<input type="button" id="insertionSort" value="insertion" />
<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(); 

 function randomString(len) {
 var text = "";
 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 
 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);
 });
 
 
 function emptySortedList() {
 var lis = document.querySelectorAll('#sortedList li');
 for(var i=0; li=lis[i]; i++) {
 li.parentNode.removeChild(li);
 }
 }
 
 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);
 });
 
 //Insertion
 document.getElementById("insertionSort").addEventListener("click", function(){      
        emptySortedList();
   
 // insertion sort
 var result = insertionSort(values);
   
 fillSortedList(result);
 });
 
 //Merge Sort
 document.getElementById("mergeSort").addEventListener("click",...