JSFiddle - React, Tailwind, and code Playground

by Erik East

HTML

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

  <input type="button" style="background-color: black; color: white;" value="Generate Array size of 100" onClick="generateArrayTwo();"/><br><br>
  <input type="button" value="Generate Array size of 1000" 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" style="background-color: black; color: white;" value="Insert into array size 100" onClick="insertIntoArrayTwo();" /><br><br>
  <input type="button" value="Insert into array size 1000" onClick="insertIntoArray();" />
  <p>Search for: <input style="width:50px;" type="textbox" id="search"/></p>
  <input type="button" style="background-color: black; color: white;" value="Search in array size 100" onClick="searchInArrayTwo();" /><br><br>
  <input type="button" style="margin-bottom: 20px;" value="Search in array size 1000" onClick="searchInArray();" />
  
  <div id="counter"></div>
  <div id="searchcounter"></div>
  <div id="finalcount"></div>
  <div id="match"></div>
  <div id="output"></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() {
count = 0;
  clearDisplay();
  for (var i = 0; i < 1000; i++) {
    array[i] = Math.floor(Math.random() * 100 + 1);
    count++;
  }
  displayArray();
}
function generateArrayTwo() {
count = 0;
  clearDisplay();
  for (var i = 0; i < 100; i++) {
    array[i] = Math.floor(Math.random() * 100 + 1);
    count++;
  }
  displayArrayTwo();
}

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 displayArrayTwo()
{
  for (var i = 0; i < 100; 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 > 100){
 	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 insertIntoArrayTwo() {
 clearDisplay();
 
 var index =...