JSFiddle - React, Tailwind, and code Playground

by wooozy

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"/>
  into index: <input style="width:50px;" type="textbox" id="index"/></p>
  <input style="margin-bottom: 20px;" type="button"  value="Insert" onClick="insertIntoArray();" />
  <div id="counter"></div>
  <div id="output"></div>

JavaScript

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

function displayCount(){
  document.getElementById("counter").innerHTML = "The Count Operation is -> " + count + "<br/><br/>";
}

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