aakash-s45 · aakash-s45 · Aug 8, 2021 · Aug 8, 2021 · Aug 8, 2021 · Aug 8, 2021
diff --git a/CNAME b/CNAME
@@ -1 +1 @@
-visual-sort.com
+ visualsort.live
diff --git a/index.html b/index.html
@@ -17,11 +17,12 @@
         <div id="toolbar" class="toolbar">
             <div id="genbtn" class="btn text" onclick="randomArray()">Random Array Generator</div>
             <!-- <div id="genbtn2" class="genbtn btn text"><input type="button" id="genbtn" value="click" onclick="randomArray()"></div> -->
-            <div class="slider"><input type="range" name="slider" min="2" max="100" value="3" id="slider"></div>
-            <div class="btn currentAlgoButton text">Merge Sort</div>
+            <div class="slider"><input type="range" name="slider" min="2" max="200" value="3" id="slider"></div>
+            <div class="btn currentAlgoButton text" onclick="mergeSoting_start()">Merge Sort</div>
             <div class="btn algoButton text" onclick="bubblesort()">Bubble Sort </div>
-            <div class="btn algoButton text">Heap Sort</div>
+            <div class="btn algoButton text">Heap Sort (Not Working)</div>
             <div class="btn algoButton text" onclick="selectionSort(arr)">Selection Sort</div>
+            <div class="btn algoButton text" onclick="quicksort_start()">QuickSort</div>
             <!-- <div id="sort" class="btn text" onclick="changeArray('sortedArr','arr')">Sort Here</div> -->
         </div>
     </header>

diff --git a/script.js b/script.js
@@ -36,7 +36,7 @@ function randomArray() {
   }
   if (y.length < 12) {
     for (i = 0; i < y.length; i++) {
-      y[i].innerHTML=arr[i];
+      y[i].innerHTML = arr[i];
     }
   }
 }
@@ -46,143 +46,237 @@ let generateButton = document.getElementById("genbtn");
 let slideVal = document.getElementById("slider");
 slideVal.addEventListener("change", randomArray);
 
-
+// --------------------------------Selection Sort--------------------------------------
 let sortedArray = [];
 async function selectionSort() {
   sortedArray = arr;
   console.log("Starting Selection Sort");
   let arrayHTML = document.getElementById("arr");
   let arrayElements = arrayHTML.getElementsByClassName("elem");
   let arrlenght = sortedArray.length;
-  let min_idx=0;
+  let min_idx = 0;
 
   for (let first = 0; first < arrlenght - 1; first++) {
     arrayElements[first].style.backgroundColor = "darkblue";
     min_idx = first;
-    
+
     for (let second = first + 1; second < arrlenght; second++) {
       arrayElements[second].style.backgroundColor = "red";
-      
-      
+
+
       var val1 = sortedArray[second];
-      var val2 = sortedArray[min_idx]; 
+      var val2 = sortedArray[min_idx];
       if (val1 < val2) {
         if (min_idx !== first) {
-          
-          arrayElements[min_idx].style.backgroundColor = "skyblue";    
-          
+
+          arrayElements[min_idx].style.backgroundColor = "skyblue";
+
         }
         min_idx = second;
       } else {
-        
+
         arrayElements[second].style.backgroundColor = "skyblue";
-        
-        }
-        await new Promise((resolve) =>
+
+      }
+      await new Promise((resolve) =>
         setTimeout(() => {
           resolve();
-        }, 100)
-        );
-        
-        if (sortedArray[second] < sortedArray[first]) {
-          let temp = sortedArray[second];
-          sortedArray[second] = sortedArray[first];
-          arrayElements[second].style.height = sortedArray[first] * 2 + "px";
-          if(arrlenght<12)arrayElements[second].innerHTML = sortedArray[first];
-          sortedArray[first] = temp;
-          arrayElements[first].style.height = temp * 2 + "px";
-          if(arrlenght<12)arrayElements[first].innerHTML = temp;
-        }
-        
-      }//#2
+        }, 50)
+      );
+
+      if (sortedArray[second] < sortedArray[first]) {
+        let temp = sortedArray[second];
+        sortedArray[second] = sortedArray[first];
+        arrayElements[second].style.height = sortedArray[first] * 2 + "px";
+        if (arrlenght < 12) arrayElements[second].innerHTML = sortedArray[first];
+        sortedArray[first] = temp;
+        arrayElements[first].style.height = temp * 2 + "px";
+        if (arrlenght < 12) arrayElements[first].innerHTML = temp;
+      }
+
+    }//#2
     await new Promise((resolve) =>
-    setTimeout(() => {
-          resolve();
-        }, 100)
-        );
-        arrayElements[min_idx].style.backgroundColor = "skyblue";   
-        arrayElements[first].style.backgroundColor = "green";
-        arrayElements[arrlenght-1].style.backgroundColor = "green";
-        
-      }//#1
-      console.log("Selection Sort Done!");
-      
-  }//#funnc
+      setTimeout(() => {
+        resolve();
+      }, 50)
+    );
+    arrayElements[min_idx].style.backgroundColor = "skyblue";
+    arrayElements[first].style.backgroundColor = "green";
+    arrayElements[arrlenght - 1].style.backgroundColor = "green";
+
+  }//#1
+  console.log("Selection Sort Done!");
+
+}//#funnc
 
 // --------------------------------Bubble Sort--------------------------------------
-let arrayBubble=[];
-async function bubblesort(delay=100) {
-  arrayBubble=arr;
-// 3 2 1 5 4
-
-// 2 1 3 4 5
-// 1 2 3 4 |5
-// 1 2 3 |4 5
-// 1 2 |3 4 5
-// // 1 |2 3 4 5
-let arrayHTML = document.getElementById("arr");
+let arrayBubble = [];
+async function bubblesort(delay = 100) {
+  arrayBubble = arr;
+  // 3 2 1 5 4
+
+  // 2 1 3 4 5
+  // 1 2 3 4 |5
+  // 1 2 3 |4 5
+  // 1 2 |3 4 5
+  // // 1 |2 3 4 5
+  let arrayHTML = document.getElementById("arr");
   let arrayElements = arrayHTML.getElementsByClassName("elem");
 
   for (var ft = 0; ft < arrayBubble.length; ft++) {
     for (var st = 0; st < (arrayBubble.length - ft - 1); st++) {
       arrayElements[st].style.backgroundColor = "darkblue";
-      arrayElements[st+1].style.backgroundColor = "red";
+      arrayElements[st + 1].style.backgroundColor = "red";
       await new Promise((resolve) =>
-                setTimeout(() => {
-                    resolve();
-                }, delay)
-            );
+        setTimeout(() => {
+          resolve();
+        }, delay)
+      );
       if (arrayBubble[st] > arrayBubble[st + 1]) {
         var temp = arrayBubble[st];
-        
+
         arrayBubble[st] = arrayBubble[st + 1];
-        arrayElements[st].style.height = arrayBubble[st+1] * 2 + "px";
+        arrayElements[st].style.height = arrayBubble[st + 1] * 2 + "px";
         arrayBubble[st + 1] = temp;
-        arrayElements[st+1].style.height = temp* 2 + "px";
- 
+        arrayElements[st + 1].style.height = temp * 2 + "px";
+
 
       }
-             arrayElements[st].style.backgroundColor = "pink";
-        arrayElements[st].style.backgroundColor = "pink";
+      arrayElements[st].style.backgroundColor = "pink";
+      arrayElements[st].style.backgroundColor = "pink";
 
     }
-       arrayElements[st].style.backgroundColor = "green";
+    arrayElements[st].style.backgroundColor = "green";
 
   }
   console.log("Bubble Sort Done!");
 }
 // --------------------------------Merge Sort--------------------------------------
+var arr_merge = arr;
+var arr_merge_size = arr_merge.length;
+
+function merge(arr_merge, l, m, r) {
+  var ll = m - l + 1;
+  var rl = r - m;
+
+  var L = new Array(ll);
+  var R = new Array(rl);
 
-let arr_merge = arr
-
-function merge(left, right) {
-  let arr = []
-  // Break out of loop if any one of the array gets empty
-  while (left.length && right.length) {
-    // Pick the smaller among the smallest element of left and right sub arrays 
-    if (left[0] < right[0]) {
-      arr.push(left.shift())
-    } else {
-      arr.push(right.shift())
+  for (let i = 0; i < ll; i++)
+    L[i] = arr_merge[l + i];
+  for (let j = 0; j < rl; j++)
+    R[j] = arr_merge[m + 1 + j];
+
+  var code1 = 0;
+  var code2 = 0;
+  var code3 = l;
+
+  let arrayHTML = document.getElementById("arr");
+  let arrayElements = arrayHTML.getElementsByClassName("elem");
+
+  while (code1 < ll && code2 < rl) {
+    if (L[code1] <= R[code2]) {
+      arr_merge[code3] = L[code1];
+      arrayElements[code3].style.height = L[code1] * 2 + "px";
+      code1++;
+    }
+    else {
+      arr_merge[code3] = R[code2];
+      arrayElements[code3].style.height = R[code2] * 2 + "px";
+      code2++;
     }
+    code3++;
+  }
+  while (code1 < ll) {
+    arr_merge[code3] = L[code1];
+    arrayElements[code3].style.height = L[code1] * 2 + "px";
+    code1++;
+    code3++;
   }
+  while (code2 < rl) {
+    arr_merge[code3] = R[code2];
+    arrayElements[code3].style.height = R[code2] * 2 + "px";
+    code2++;
+    code3++;
+  }
+}
+
+let counter = 0;
+function mergeSort(arr_merge, l, r) {
+  if (l >= r) {
+    return;
+  }
+  counter++;
+  var m = l + parseInt((r - l) / 2);
+  mergeSort(arr_merge, l, m);
+  mergeSort(arr_merge, m + 1, r);
+  setTimeout(() => {
+    merge(arr_merge, l, m, r);
+  }, 200 * counter);
 
-  // Concatenating the leftover elements
-  // (in case we didn't go through the entire left or right array)
-  return [...arr, ...left, ...right]
 }
 
-function mergeSort(array) {
-  const half = array.length / 2
+function mergeSoting_start() {
+  arr_merge = arr;
+  mergeSort(arr_merge, 0, arr_merge.length - 1);
+  console.log("Merge Sorting Done!")
+}
+// --------------------------------QuickSort--------------------------------------
+function partition(arr_q, qlow, qhigh) {
+  let pivot = arr_q[qlow];
+  let qi = qlow + 1;
+  let qj = qhigh;
+  let qtemp;
 
-  // Base case or terminating case
-  if (array.length < 2) {
-    return array
+  let arrayHTML = document.getElementById("arr");
+  let arrayElements = arrayHTML.getElementsByClassName("elem");
+
+  do {
+    while (arr_q[qi] <= pivot) {
+      qi++;
+    }
+    while (arr_q[qj] > pivot) {
+      qj--;
+    }
+    if (qi < qj) {
+      qtemp = arr_q[qi];
+      arr_q[qi] = arr_q[qj];
+      arrayElements[qi].style.height = arr_q[qj] * 2 + "px";
+      arr_q[qj] = qtemp;
+      arrayElements[qj].style.height = qtemp * 2 + "px";
+    }
+  } while (qj > qi);
+
+  qtemp = arr_q[qlow];
+  arr_q[qlow] = arr_q[qj];
+  arrayElements[qlow].style.height = arr_q[qj] * 2 + "px";
+  arr_q[qj] = qtemp;
+  arrayElements[qj].style.height = qtemp * 2 + "px";
+  return qj;
+}
+let quick_count = 0;
+function quicksort(arr_q, qlow, qhigh) {
+  let partitionInd;
+  quick_count++;
+  if (qlow < qhigh) {
+    partitionInd = partition(arr_q, qlow, qhigh);
+
+    setTimeout(() => {
+
+      quicksort(arr_q, qlow, partitionInd - 1);
+      quicksort(arr_q, partitionInd + 1, qhigh);
+    }, 20 * quick_count);
   }
+}
 
-  const left = array.splice(0, half)
-  return merge(mergeSort(left), mergeSort(array))
+function quicksort_start() {
+  let quick_arr = arr;
+  quicksort(quick_arr, 0, quick_arr.length - 1);
+  console.log("QuickSort Done!");
 }
 
-// arr_merge = mergeSort(arr_merge);
-// console.log(arr_merge);
+// var arr_q = [8, 7, 5, 3, 3, 56, 74, 12, 65, 85, 42];
+
+
+
+// quicksort(arr_q, 0, arr_q.length - 1);
diff --git a/style.css b/style.css
@@ -69,6 +69,6 @@ body{
     backdrop-filter: blur(3px);
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    /* transition: height 1s;
+    /* transition: height 2s;
     transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); */
 }