JSFiddle - React, Tailwind, and code Playground

by Peyton Hessler

HTML

<!--Below is the html code for displaying what is seen on the screen on the right-->

<h3 id="theArray"></h3>

<BR>
<input type="text" id="arrayElements" value="1000"></input> <!--Here I placed the number that begins in the load array button-->
<button type="button" id="LoadArray" onclick="LoadArray()">Load Array</button>  <!--Here is the code for creating the button displayed. When pressed it calls the LoadArray function from the javascript code-->
<BR>
<BR>
<BR>Enter index point
<BR>
<input type="text" id="inPosition" value="0"></input> <!--Here I placed the number that begins in the insert into array button-->
<button type="button" id="InsertIntoArray" onclick="InsertIntoArray(globalArray)">Insert Into Array</button>  <!--Here is the code for creating the button displayed. When pressed it calls the InsertIntoArray function from the javascript code-->
<BR>Enter a value to insert
<BR>
<input type="text" id="inValue" value="0"></input> <!--Here I placed the number that begins in the insert into array button-->
<BR>
<BR>
<BR>
<input type="text" id="searchValue" value="0"></input> <!--Here I placed the number that begins in the search array button-->
<button type="button" id="Search" onclick="SearchArray()">Search Array</button> <!--Here is the code for creating the button displayed. When pressed it calls the SearchArray function from the javascript code-->
<HR>
<p id="theOutput2"></p>
<HR>
<p id="theOutput"></p>

JavaScript

var numOfOps = 1;			// This creates the variable for the numOfOps starting at 1. Startign it at 1 makes sure that the search will begin at the start of the array. 
    var searchVal = 0;		// This creates the variable for searchVal, which begins at 0.
    var globalArray = []; // This creates a global array for the code below to use.

// Below is the function for loading the array.
    function LoadArray() {
        stats = ""; // This is the string variable used later on to place string texts onto the screen.
        numElements = document.getElementById("arrayElements").value;
        var numArray = [];
        // Here is the for loop for creating the random array.
        for (i = 0; i < numElements; i++) {
            numArray[i] = Math.ceil(Math.random() * 100);
        }
        document.getElementById("theOutput").innerHTML = numArray.join(" | ");
        numOfOps=4+i; // This here adds 4 to the array amount to show how many operations were in the process.
        stats = numElements + " elements were populated with random numbers (1-100)."; // Here it explains how many elements were randomly created within the limitations.
        stats += "<BR><BR> There were " + numOfOps + " operations in this process."; // This uses the numOfOps created in the function and displays how many operations their were.
        stats += "<BR><BR>This array operaition function represents an O(n) complexity algorithm.";
        document.getElementById("theOutput2").innerHTML = stats;
        numOfOps = 1;
        globalArray = numArray;
    }

// Now there is the function that inserts a certain number defined by the user into the array at a certain index.
    function InsertIntoArray(varArray) {
        var stats = "";
        Index = document.getElementById("inPosition").value;
        dVal = document.getElementById("inValue").value;
        // Here is the code for placing the value at a certain point of the array. It is a an if else statement that is used here along with a for...