Added Input for Array Size

index.html

@@ -11,11 +11,19 @@
     <center>
         <h1>ALGORITHM VISUALIZER</h1>
     </center>
-    <button id="random_array" onclick="random_array_generator()">Generate Array</button>
-    <button onclick="bubble_sortonclick()">Bubble Sort</button>
-    <button onclick="insertion_sortonclick()">Insertion Sort</button>
-    <button onclick="selection_sortonclick()">Selection Sort</button>
-    <button onclick="merge_sortonclick()">Merge Sort</button>
+    <div class="input_container">
+        <input type="number" name="arraySizeInput" id="arraySizeInput" placeholder="Array Size"/>
+        <button id="array_generator" onclick="array_generator()">Generate Array</button>
+        <div>
+            <button id="random_array" onclick="random_array_generator()">Generate Random Array</button>
+            <button onclick="bubble_sortonclick()">Bubble Sort</button>
+            <button onclick="insertion_sortonclick()">Insertion Sort</button>
+            <button onclick="selection_sortonclick()">Selection Sort</button>
+            <button onclick="merge_sortonclick()">Merge Sort</button>
+        </div>
+    </div>
+
+
     <center><div id="array"></div></center>
 </body>
 <script src="script.js"></script>

script.js

@@ -1,28 +1,44 @@
-var random_array=document.getElementById('radom_array');
-var array_generated=document.getElementById("array");
+var generate_array = document.getElementById('array_generator');
+var array_size_input = document.getElementById('arraySizeInput');
+var random_array = document.getElementById('radom_array');
+var array_generated = document.getElementById("array");
 
-var i=0, j=0,m=0;
-var start,end;//for recording the time 
+var i = 0, j = 0, m = 0;
+var start, end;//for recording the time 
 var globinterval;
 
 
-function random_array_generator(){
-    array_generated.innerHTML="";
-    for(var k=0;k<8;k++)
-    {
-        var val=randomIntFromInterval(10,100);
+function random_array_generator() {
+    array_generated.innerHTML = "";
+    for (var k = 0; k < 8; k++) {
+        var val = randomIntFromInterval(10, 100);
         var node = document.createElement("div");
-        node.setAttribute("class","bar_view");  
-        node.style.height=val*4+"px";     
+        node.setAttribute("class", "bar_view");
+        node.style.height = val * 4 + "px";
         // var textnode = document.createTextNode(val);         
         // node.appendChild(textnode);                         
-        array_generated.appendChild(node);    
+        array_generated.appendChild(node);
     }
-    i=0;
-    j=0;
+    i = 0;
+    j = 0;
 }
 
+function array_generator() {
+    let array_size = array_size_input.value || 10
+    array_generated.innerHTML = "";
+    for (var k = 0; k < array_size; k++) {
+        var val = randomIntFromInterval(10, 100);
+        var node = document.createElement("div");
+        node.setAttribute("class", "bar_view");
+        node.style.height = val * 4 + "px";
+        // var textnode = document.createTextNode(val);         
+        // node.appendChild(textnode);                         
+        array_generated.appendChild(node);
+    }
+    i = 0;
+    j = 0;
+}
 function randomIntFromInterval(min, max) { // min and max included 
     return Math.floor(Math.random() * (max - min + 1) + min);
-  }
+}
 

style.css

@@ -1,3 +1,9 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .bar_view {
   width: 3px;
   /* height: 50px; */
@@ -10,3 +16,17 @@
 #array {
   justify-content: space-evenly;
 }
+.input_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.input_container  div {
+  display: flex;
+  flex-direction: row;
+}
+
+button {
+  margin: 5px;
+}