update 1.8

implemented quicksort, need to implement sorted elements turning cyan

Author: abiramrnair

index.html

@@ -25,15 +25,14 @@ <h1>Sorting Visualizer</h1>
         </div>        
 
         <div class="slideContainer">
-            <input type="range" min="5" max="50" value="5" id="myRange" class="slider">            
+            <input type="range" min="5" max="160" value="5" id="myRange" class="slider">            
         </div>
 
         <p id="boxcount">Items: <span id="value"></span></p>
 
-        <button>Go</button>
         <button onclick="BubbleSort()">BubbleSort</button>
         <button onclick="MergeSort()">MergeSort</button>
-        <button onclick="QuickSort()">QuickSort</button>
+        <button onclick="doQuickSort()">QuickSort</button>
 
         <script src="script.js" async defer></script>   
     </body>

script.js

@@ -1,10 +1,11 @@
 var slider = document.getElementById("myRange");
 var slidevalue = document.getElementById("value");
 slidevalue.innerHTML = slider.value;
+var sortSelection;
 
 
 for (i = 0; i < 5; i++) {
-    var w = 810/5;
+    var w = 200/5;
     var num2 = addPx(w);
     var n = Math.floor(Math.random() * 625) + 50;
     var num = addPx(n);
@@ -23,13 +24,13 @@ slider.oninput = function() {
     slidevalue.innerHTML = this.value;
     numBoxes = this.value;    
     var obj = document.getElementsByClassName("box");
-
+   
     while(obj[0]) {
         obj[0].parentNode.removeChild(obj[0]);
     }
 
     for (i = 0; i < numBoxes; i++) {
-            var w = 810/numBoxes;
+            var w = 200/numBoxes;
             var num2 = addPx(w);
             var n = Math.floor(Math.random() * 600) + 30;
             var num = addPx(n);
@@ -68,7 +69,11 @@ function removePx (str) {
 
 
 async function Swap(x, y) {
+    if (sortSelection = 0) {
     await sleep((-22)*(myCollection.length) + 1120);
+    } else if (sortSelection = 1) {
+        await sleep(25);
+    }
     var temp = myCollection[x].style.height;
     myCollection[x].style.height = myCollection[y].style.height;
     myCollection[y].style.height = temp;
@@ -85,7 +90,8 @@ function sleep(ms) {
 async function BubbleSort() {
     var isSorted = 0;
     var lastUnsorted = myCollection.length - 1;
-        
+    sortSelection = 0;
+
         while (isSorted == 0) {
             isSorted = 1;
             for (i = 0; i < lastUnsorted; i++) {                
@@ -116,14 +122,47 @@ async function BubbleSort() {
     }
 }
 
+// QuickSort
+
+async function Partition(start,end) {
+    var pivot = removePx(myCollection[end].style.height);
+    var partitionIndex = start;
+
+    for (i = start; i < end; i++) {
+        if (removePx(myCollection[i].style.height) >= pivot) {
+            myCollection[i].style.background = "red";
+            myCollection[i].style.color = "red";
+            myCollection[partitionIndex].style.background = "red";
+            myCollection[partitionIndex].style.color = "red";
+            await Swap(i, partitionIndex);
+            myCollection[i].style.background = "bisque";
+            myCollection[i].style.color = "bisque";
+            myCollection[partitionIndex].style.background = "bisque"; 
+            myCollection[partitionIndex].style.color = "bisque";            
+            partitionIndex++;                
+        }  
+    }
+    await Swap(partitionIndex, end);    
+    return partitionIndex;
+}
 
+async function QuickSort(start,end) {
+    if (start < end) {
+        var partitionIndex = await Partition(start, end);
+        await QuickSort(start, partitionIndex - 1);
+        await QuickSort(partitionIndex + 1, end);        
+    }    
+}
 
+function doQuickSort() {
+    sortSelection = 1;
+    QuickSort(0, myCollection.length - 1);    
+}
 
-// MergeSort
+// MergeSort 
 
 
 
-//QuickSort
 
 
 

style.css

@@ -19,7 +19,7 @@ h1 {
 }
 
 .slider::after {
-    content: '50';
+    content: '160';
     color: black;
     font-size: large;
     position: absolute;
@@ -39,7 +39,8 @@ p {
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
 
-#boxcount {    
+#boxcount {
+    position: relative;    
     text-align: center;
     padding-top: 1%;
 }
@@ -53,8 +54,8 @@ p {
 }
 
 .box {
-    border: 3px solid black;  
-    padding: 5px;
+    border: 1px solid black;  
+    padding: 2px;
     margin: 2px;
     display: inline-block;
     background: bisque;
@@ -68,9 +69,25 @@ p {
     width: 1840px;      
     border: 5px solid darkgrey;   
     position: relative;           
-    top: 40px;
+    top: 50px;
     left: 30px;
     padding-bottom: 2%;    
     transform: rotate(180deg); 
 }
 
+button {
+    background-color: white; /* Green */
+    border: 1px solid black;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    padding: 15px 32px; 
+    position: relative;
+    left: 5%;
+    bottom: 20px;    
+    margin-left: 2%;
+}
+