JSFiddle - React, Tailwind, and code Playground

by MimiE

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
	</head>
		<body>
		<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>
	</body>
	<script type="text/javascript" src=8.js></script>
</html>

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();

  var itemContent = document.getElementById("newItem").value;
  if ((itemContent == null) ||...