Implementation checked on PC --> works as of now

All the algorithms(sorting as of now)
RyanTuscano · Jul 27, 2024 · 7c40b14 · 7c40b14
1 parent 4359758
commit 7c40b14
Show file tree

Hide file tree

Showing 8 changed files with 522 additions and 0 deletions.
diff --git a/Index.html b/Index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sorting Visualizer</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+<header>
+    <h1 align="center">Sorting Visualizer</h1>
+    <nav>
+        <div class="row">
+            <div class="col gap-2 d-sm-flex" id="newArray">
+                <button type="button" class="btn btn-outline-success btn-dark newArray">New Array</button>
+            </div>
+            <div class="col" id="input">
+                <span id="size">Size
+                    <input id="arr_sz" type="range" min="5" max="100" step=1 value=60>
+                </span>
+                <span id="speed">Speed
+                    <input id="speed_input" type="range" min="20" max="300" stepDown=10 value=60>
+                </span>
+            </div>
+            <div class="col gap-2 d-sm-flex justify-content-end">
+                <button type="button" class="btn btn-outline-primary btn-dark bubbleSort">Bubble Sort</button>
+                <button type="button" class="btn btn-outline-primary btn-dark selectionSort">Selection Sort</button>
+                <button type="button" class="btn btn-outline-primary btn-dark insertionSort">Insertion Sort</button>
+                <button type="button" class="btn btn-outline-primary btn-dark quickSort">Quick Sort</button>
+                <button type="button" class="btn btn-outline-primary btn-dark mergeSort">Merge Sort</button>
+            </div>
+        </div>
+    </nav>
+</header>
+<body class="p-3 mb-2 bg-dark text-white">
+
+    <div id="bars" class="flex-container"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
+    <script src="js_files/sorting.js"></script>
+    <script src="js_files/bubble.js"></script>
+    <script src="js_files/insertion.js"></script>
+    <script src="js_files/merge.js"></script>
+    <script src="js_files/quick.js"></script>
+    <script src="js_files/selection.js"></script>
+</body>
+</html>
diff --git a/Style.css b/Style.css
@@ -0,0 +1,33 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    padding: 0 20px 30px 0;
+    line-height: 1.4;
+}
+.flex-container{
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 500px;
+    justify-content: center;
+    transition: 2s all ease;
+}
+
+.flex-item{
+    background: cyan;
+    border: 1pt solid black;
+    width: 10px;
+    transition: 0.1s all ease;
+}
+
+.row{
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+}
+
+#input{
+    display: flex;
+    padding: 10px;
+    justify-content: space-around;
+}
diff --git a/js_files/bubble.js b/js_files/bubble.js
@@ -0,0 +1,32 @@
+async function bubble() {
+    console.log('In bubbe()');
+    const ele = document.querySelectorAll(".bar");
+    for(let i = 0; i < ele.length-1; i++){
+        console.log('In ith loop');
+        for(let j = 0; j < ele.length-i-1; j++){
+            console.log('In jth loop');
+            ele[j].style.background = 'blue';
+            ele[j+1].style.background = 'blue';
+            if(parseInt(ele[j].style.height) > parseInt(ele[j+1].style.height)){
+                console.log('In if condition');
+                await waitforme(delay);
+                swap(ele[j], ele[j+1]);
+            }
+            ele[j].style.background = 'cyan';
+            ele[j+1].style.background = 'cyan';
+        }
+        ele[ele.length-1-i].style.background = 'green';
+    }
+    ele[0].style.background = 'green';
+}
+
+const bubSortbtn = document.querySelector(".bubbleSort");
+bubSortbtn.addEventListener('click', async function(){
+    disableSortingBtn();
+    disableSizeSlider();
+    disableNewArrayBtn();
+    await bubble();
+    enableSortingBtn();
+    enableSizeSlider();
+    enableNewArrayBtn();
+});
diff --git a/js_files/insertion.js b/js_files/insertion.js
@@ -0,0 +1,44 @@
+async function insertion(){
+    console.log('In insertion()');
+    const ele = document.querySelectorAll(".bar");
+    // color
+    ele[0].style.background = 'green';
+    for(let i = 1; i < ele.length; i++){
+        console.log('In ith loop');
+        let j = i - 1;
+        let key = ele[i].style.height;
+        // color
+        ele[i].style.background = 'blue';
+
+        await waitforme(delay);
+
+        while(j >= 0 && (parseInt(ele[j].style.height) > parseInt(key))){
+            console.log('In while loop');
+            // color
+            ele[j].style.background = 'blue';
+            ele[j + 1].style.height = ele[j].style.height;
+            j--;
+
+            await waitforme(delay);
+
+            // color
+            for(let k = i; k >= 0; k--){
+                ele[k].style.background = 'green';
+            }
+        }
+        ele[j + 1].style.height = key;
+        // color
+        ele[i].style.background = 'green';
+    }
+}
+
+const inSortbtn = document.querySelector(".insertionSort");
+inSortbtn.addEventListener('click', async function(){
+    disableSortingBtn();
+    disableSizeSlider();
+    disableNewArrayBtn();
+    await insertion();
+    enableSortingBtn();
+    enableSizeSlider();
+    enableNewArrayBtn();
+});
diff --git a/js_files/merge.js b/js_files/merge.js
@@ -0,0 +1,119 @@
+//let delay = 30;
+async function merge(ele, low, mid, high){
+    console.log('In merge()');
+    console.log(`low=${low}, mid=${mid}, high=${high}`);
+    const n1 = mid - low + 1;
+    const n2 = high - mid;
+    console.log(`n1=${n1}, n2=${n2}`);
+    let left = new Array(n1);
+    let right = new Array(n2);
+
+    for(let i = 0; i < n1; i++){
+        await waitforme(delay);
+        console.log('In merge left loop');
+        console.log(ele[low + i].style.height + ' at ' + (low+i));
+        // color
+        ele[low + i].style.background = 'orange';
+        left[i] = ele[low + i].style.height;
+    }
+    for(let i = 0; i < n2; i++){
+        await waitforme(delay);
+        console.log('In merge right loop');
+        console.log(ele[mid + 1 + i].style.height + ' at ' + (mid+1+i));
+        // color
+        ele[mid + 1 + i].style.background = 'yellow';
+        right[i] = ele[mid + 1 + i].style.height;
+    }
+    await waitforme(delay);
+    let i = 0, j = 0, k = low;
+    while(i < n1 && j < n2){
+        await waitforme(delay);
+        console.log('In merge while loop');
+        console.log(parseInt(left[i]), parseInt(right[j]));
+
+        // To add color for which two r being compared for merging
+
+        if(parseInt(left[i]) <= parseInt(right[j])){
+            console.log('In merge while loop if');
+            // color
+            if((n1 + n2) === ele.length){
+                ele[k].style.background = 'green';
+            }
+            else{
+                ele[k].style.background = 'lightgreen';
+            }
+
+            ele[k].style.height = left[i];
+            i++;
+            k++;
+        }
+        else{
+            console.log('In merge while loop else');
+            // color
+            if((n1 + n2) === ele.length){
+                ele[k].style.background = 'green';
+            }
+            else{
+                ele[k].style.background = 'lightgreen';
+            } 
+            ele[k].style.height = right[j];
+            j++;
+            k++;
+        }
+    }
+    while(i < n1){
+        await waitforme(delay);
+        console.log("In while if n1 is left");
+        // color
+        if((n1 + n2) === ele.length){
+            ele[k].style.background = 'green';
+        }
+        else{
+            ele[k].style.background = 'lightgreen';
+        }
+        ele[k].style.height = left[i];
+        i++;
+        k++;
+    }
+    while(j < n2){
+        await waitforme(delay);
+        console.log("In while if n2 is left");
+        // color
+        if((n1 + n2) === ele.length){
+            ele[k].style.background = 'green';
+        }
+        else{
+            ele[k].style.background = 'lightgreen';
+        }
+        ele[k].style.height = right[j];
+        j++;
+        k++;
+    }
+}
+
+async function mergeSort(ele, l, r){
+    console.log('In mergeSort()');
+    if(l >= r){
+        console.log(`return cause just 1 elemment l=${l}, r=${r}`);
+        return;
+    }
+    const m = l + Math.floor((r - l) / 2);
+    console.log(`left=${l} mid=${m} right=${r}`, typeof(m));
+    await mergeSort(ele, l, m);
+    await mergeSort(ele, m + 1, r);
+    await merge(ele, l, m, r);
+}
+
+const mergeSortbtn = document.querySelector(".mergeSort");
+mergeSortbtn.addEventListener('click', async function(){
+    let ele = document.querySelectorAll('.bar');
+    let l = 0;
+    let r = parseInt(ele.length) - 1;
+    disableSortingBtn();
+    disableSizeSlider();
+    disableNewArrayBtn();
+    await mergeSort(ele, l, r);
+    enableSortingBtn();
+    enableSizeSlider();
+    enableNewArrayBtn();
+});
diff --git a/js_files/quick.js b/js_files/quick.js
@@ -0,0 +1,77 @@
+async function partitionLomuto(ele, l, r){
+    console.log('In partitionLomuto()');
+    let i = l - 1;
+    // color pivot element
+    ele[r].style.background = 'red';
+    for(let j = l; j <= r - 1; j++){
+        console.log('In partitionLomuto for j');
+        // color current element
+        ele[j].style.background = 'yellow';
+        // pauseChamp
+        await waitforme(delay);
+
+        if(parseInt(ele[j].style.height) < parseInt(ele[r].style.height)){
+            console.log('In partitionLomuto for j if');
+            i++;
+            swap(ele[i], ele[j]);
+            // color 
+            ele[i].style.background = 'orange';
+            if(i != j) ele[j].style.background = 'orange';
+            // pauseChamp
+            await waitforme(delay);
+        }
+        else{
+            // color if not less than pivot
+            ele[j].style.background = 'pink';
+        }
+    }
+    i++; 
+    // pauseChamp
+    await waitforme(delay);
+    swap(ele[i], ele[r]); // pivot height one
+    console.log(`i = ${i}`, typeof(i));
+    // color
+    ele[r].style.background = 'pink';
+    ele[i].style.background = 'green';
+
+    // pauseChamp
+    await waitforme(delay);
+
+    // color
+    for(let k = 0; k < ele.length; k++){
+        if(ele[k].style.background != 'green')
+            ele[k].style.background = 'cyan';
+    }
+
+    return i;
+}
+
+async function quickSort(ele, l, r){
+    console.log('In quickSort()', `l=${l} r=${r}`, typeof(l), typeof(r));
+    if(l < r){
+        let pivot_index = await partitionLomuto(ele, l, r);
+        await quickSort(ele, l, pivot_index - 1);
+        await quickSort(ele, pivot_index + 1, r);
+    }
+    else{
+        if(l >= 0 && r >= 0 && l <ele.length && r <ele.length){
+            ele[r].style.background = 'green';
+            ele[l].style.background = 'green';
+        }
+    }
+}
+
+
+const quickSortbtn = document.querySelector(".quickSort");
+quickSortbtn.addEventListener('click', async function(){
+    let ele = document.querySelectorAll('.bar');
+    let l = 0;
+    let r = ele.length - 1;
+    disableSortingBtn();
+    disableSizeSlider();
+    disableNewArrayBtn();
+    await quickSort(ele, l, r);
+    enableSortingBtn();
+    enableSizeSlider();
+    enableNewArrayBtn();
+});