JSFiddle - React, Tailwind, and code Playground

by Erik East

HTML

<h2>Module 01</h2>
<h3>Assignment 01</h3>

  <input type="button" value="Generate Array" onClick="generateArray();" />
  <p>Insert value: <input style="width:50px;" type="textbox" id="value" value="33"/>
  into index: <input style="width:50px;" type="textbox" id="index" value="3"/></p>
  <input type="button" value="Insert" onClick="insertIntoArray();" />
  <p>Search for: <input style="width:50px;" type="textbox" id="search"/></p>
  <input type="button" style="margin-bottom:20px;" value="Search" onClick="searchInArray();" />
  
  <div id="counter"></div>
  <div id="searchcounter"></div>
  <div id="finalcount"></div>
  <div id="match"></div>
  <div id="output" style="float: left; clear: right; margin-right: 25px;"></div>
  <div id="output_two" style="float: left;"></div>

JavaScript

var array = [];
var d = "";
var count = 0;
var searchcount = 0;

function displayCount(){
  document.getElementById("counter").innerHTML = "Total number of operations is: " + count + ".<br/><br/>";
}

function displaySearchCount(){
var finding = parseInt(document.getElementById("search").value);
	document.getElementById("searchcounter").innerHTML = "The value " + finding + " appears " + searchcount + " times in the array.<br/><br/>";
  displayCount();
}

function generateArray() {
  clearDisplay();
  for (var i = 0; i < 1000; i++) {
    array[i] = Math.floor(Math.random() * 100 + 1);
    count++;
  }
  displayArray();
}

function clearDisplay()
{
	d = "";
	document.getElementById("output").innerHTML = "";
}

function displayArray()
{
  for (var i = 0; i < 1000; i++) {
    d += (i) + ': ' + array[i] + "<br/>";
  }
  displayCount();
  document.getElementById("output").innerHTML = d;
}

function insertIntoArray() {
 clearDisplay();
 
 var index = parseInt(document.getElementById("index").value);
 var v = document.getElementById("value").value;

 if(isNaN(v) || v < 1 || v > 1000){
 	index=1000;
  d="Please input a value (1-100)<br/><br/>";
  count--;
 }
 else if(isNaN(index) || index < 0 || index > 999){
 index=1000;
 d="Please input an index (0-999)<br/><br/>";
 count--;
 }	
 else{
  d = "Inserting value " + v + " at index " + index + "<br/><br/>";
 }
 
for(var n = array.length - 1; n >= (index+1); n--){
array[n] = array[n-1];
count++;
}

array[index] = v;

count++;  
displayArray();
}

function searchInArray(){
searchcount = 0;
var arraytwo = [];
clearDisplay();
	var finding = parseInt(document.getElementById("search").value);
	
	for(var z = 0; z < array.length; z++){
		if(array[z] == finding){
		searchcount++;
		count++;
		arraytwo[z] = z;
		document.getElementById("match").innerHTML = "The value " + finding + " was found at index " + z + ".<br/><br/>";
		}
		else{
		count++;
		}
	}
	displayCount();
	displaySearchCount();
	displayArray();
}