JSFiddle - React, Tailwind, and code Playground

by Mike Kerney

HTML

Enter Array Size:
<input type="textbox" id="tbArraySize" value="100" />
<input type="button" value="Create Array" onClick="btnCreate();" />
<br/>
<br/> Enter Location:
<input type="textbox" id="tbInsertIndex" value="20" />
<br/>
<br/> Enter Value to Insert:
<input type="textbox" id="tbInsertValue" value="99" />
<br/>
<br/>
<input type="button" value="Insert into Array" onClick="btnInsert();" />
<br/>
<br/> Enter Value to Find:
<input type="textbox" value="20" id="tbSearchValue" />
<input type="button" value="Search" onClick="btnSearch();" />
<br/>
<br/>
<br/>
<div id="arrayoutput">
</div>
<br/>
<div id="insertoutput">
  <br/>
</div>
<br/>
The time complexity of the algorithm is 0(n).  It is a linear function that is directly proportional to the size off the array.  The loop goes through each element in the array one time and performs one operation per element.  The worst case scenario is for the loop to go throught every element in the array, therefore the max number of operations is the size of the array.
<br/>
<br/>
<div id="searchoutput">
</div>
<br/> The time complexity of the algorithm is 0(n). This is because it is a linear function that is directly proportional to the size of the array being searched. It goes through the array and compares each number to a set number which is one operation per
number in the array until it finds a match. So the worst case for operations is the same as the maximum number of elements in the array.

JavaScript

var array = []
var show = "";
var operations = 0;

function btnCreate() {
  clearDisplay();
  var arraySize = parseInt(document.getElementById("tbArraySize").value);
  for (var i = 0; i < arraySize; i++) {
    array[i] = Math.floor(Math.random() * 101);
  }
  displayArray();
}

function displayArray() {
  for (var i = 0; i < array.length - 1; i++) {
    show += array[i] + ", ";
  }
  document.getElementById("arrayoutput").innerHTML = show;
}

function clearDisplay() {
  show = " ";
  document.getElementById("arrayoutput").value = " ";

}

function btnInsert() {
  var insLoc = document.getElementById("tbInsertIndex").value;
  var insNum = document.getElementById("tbInsertValue").value;
  var counter = 0;
  var arraySize = document.getElementById("tbArraySize").value;


  for (var i = arraySize - 1; i >= insLoc; i--) {

    if (i > insLoc) {
      array[i] = array[i - 1]
      counter++

    } else if (i = insLoc) {
      array[i] = insNum
      counter++
    }
  }

  clearDisplay();
  displayArray();

  document.getElementById("insertoutput").innerHTML = "Value " + insNum + " inserted at location " + insLoc + " - there were " + counter + " operations performed.";
}

function btnSearch() {
  var searchArray = document.getElementById("tbSearchValue").value;
  var firstLoc = 0;
  clearDisplay();

  for (var i = 0; i < array.length; i++) {
    operations++
    if (array[i] == searchArray) {
      firstLoc = i;
      break;
    }
  }
  if (firstLoc != 0) {
    document.getElementById("searchoutput").innerHTML = "Value " + searchArray + " found at location " + firstLoc + " - there were " + operations + " comparison operations performed in this search.";
  } else {
    document.getElementById("searchoutput").innerHTML = " Value " + searchArray + " was not found in the array. " + operations + " operations were performed."
  }
}