Insert Into Array

Assignment 2 Part 1

by ClarenceDowns

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="part1b.css">
</head>

<body>

    <h1>Insert Elements Into the Array:</h1>
    <h2 id='count'></h2>
    <br />Enter Index:
    <input class="boxes" type='textbox' id='index' />

    Enter Element to Insert:
    <input class="boxes" type='textbox' id='newNum' />
    <br />
    <button class="button" onClick="insertIntoArray()">Insert into Array</button>
    <br />
    <div id="output">

    </div>
    <script src="main.js"></script>

</body>

</html>

CSS

.boxes {
    margin: .2rem 0rem;
}
.button {
    margin: .2rem 0rem;
}

JavaScript

let count = 0;

let myArray = [];
count++;
for (let i = 0; i <= 1000; i++) {
  myArray[i] = Math.floor(Math.random() * 100 + 1);
  count++;
}
displayArray(myArray);
// function that inserts element into array
function insertIntoArray(index, newNum) {
  newNum = parseInt(document.getElementById("newNum").value);
  count++;
  index = parseInt(document.getElementById("index").value);
  count++;
  for (let i = index; i < myArray.length; i++) {
    let tmp = newNum;
    newNum = myArray[i];
    myArray[i] = tmp;
    count++;
  }
  displayArray();
}
//function to display array in a column
function displayArray() {
  let d = "";
  count++;
  for (let i = 0; i < myArray.length - 1; i++) {
    d += i + " : " + myArray[i] + "<br/>";
    count++;
  }
  document.getElementById("output").innerHTML = d;
  count++;
}
document.getElementById("count").innerHTML =  "Counter: " + count;