Added Sorting Visualizer ! (#301)

* Added Snake Game * Improved 8 solver puzzle * Improved Snake game * Added Sorting Visualizer * Added Sorting Visualizer * Changes
Spandan-Bhattacharya · Feb 21, 2024 · 18e9923 · 18e9923
1 parent 9cc8f91
commit 18e9923
Show file tree

Hide file tree

Showing 4 changed files with 272 additions and 0 deletions.
diff --git a/Sorting Visualizer/index.html b/Sorting Visualizer/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sorting Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body background="../assets/bg.webp">
+    <div class="wrapper" >
+        <h1 class="heading">Sorting Visualizers</h1>
+        <div class="box-container">
+        </div>
+        <div class="buttons">
+            <select name="speed" id="speed" class="btn" style="cursor: pointer;  outline: none;">
+                <option value="500">Speed</option>
+                <option value="1000">0.5X</option>
+                <option value="500">1X</option>
+                <option value="100">1.5X</option>
+                <option value="10">2X</option>
+            </select>
+            <div id="genrate-btn" class="btn">Generate</div>
+            <div id="bubbleSort" class="btn">Bubble Sort</div>
+            <div id="selectionSort" class="btn">Selection Sort</div>
+            <div id="insertionSort" class="btn">Insertion Sort</div>
+        </div>
+    </div>
+
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Sorting Visualizer/script.js b/Sorting Visualizer/script.js
@@ -0,0 +1,144 @@
+let n = 20;
+let arr = [];
+let sortArr = [];
+let speed = document.getElementById("speed");
+
+let generateBtn = document.getElementById("genrate-btn");
+
+let container = document.querySelector(".box-container");
+
+function generateHeight() {
+    return Math.floor(Math.random() * 95);
+}
+
+function generateArray() {
+    arr = [];
+    for (let i = 0; i < n; i++) {
+        let ht = generateHeight();
+        while (!ht) ht = generateHeight();// so that no height is zero
+        arr[i] = ht;
+    }
+
+    showBars();
+}
+
+function showBars(indices) {
+    container.innerHTML = ``;
+    for (let i = 0; i < n; i++) {
+
+        const bar = document.createElement("div");
+        bar.classList.add("bar");
+        bar.style.height = arr[i] + "%";
+
+        if (indices && indices.includes(i)) {
+
+            if (indices.includes("swap"))
+                bar.style.backgroundColor = "lime";
+            else
+                bar.style.backgroundColor = "red";
+        }
+        container.appendChild(bar);
+    }
+}
+
+function bubbleSort() {
+    let temp = [...arr];
+    for (let i = 0; i < n - 1; i++) {
+        for (let j = 0; j < n - 1 - i; j++) {
+            sortArr.push([j, j + 1, "comp"]);
+            if (temp[j] > temp[j + 1]) {
+                sortArr.push([j, j + 1, "swap"]); 
+
+                let t = temp[j];
+                temp[j] = temp[j + 1];
+                temp[j + 1] = t;
+            }
+        }
+    }
+
+    animate();
+}
+
+function selectionSort() {
+    let temp = [...arr];
+
+    for (let i = 0; i < n - 1; i++) {
+        let min = i;
+
+        for (let j = i + 1; j < n; j++) {
+            sortArr.push([j, min, "comp"]);
+            if (temp[min] > temp[j]) {
+                min = j;
+            }
+        }
+
+        if (min != i) {
+            sortArr.push([min, i, "swap"]);
+
+            let t = temp[min];
+            temp[min] = temp[i];
+            temp[i] = t;
+        }
+    }
+
+    animate();
+}
+
+function insertionSort() {
+    let temp = [...arr];
+
+    for (let i = 1; i < n; i++) {
+
+        let j = i;
+
+        while (j > 0) {
+            sortArr.push([j, j - 1, "comp"]);
+            if (temp[j] < temp[j - 1]) {
+                sortArr.push([j - 1, j, "swap"]);
+
+                let t = temp[j];
+                temp[j] = temp[j - 1];
+                temp[j - 1] = t;
+
+                j--;
+            }
+            else {
+                break;
+            }
+        }
+    }
+
+    animate();
+}
+
+function animate() {
+    if (sortArr.length == 0) {
+        showBars();
+        return;
+    }
+
+    let m = sortArr.shift();
+
+    if (m[2] === "swap") {
+        let t = arr[m[0]];
+        arr[m[0]] = arr[m[1]];
+        arr[m[1]] = t;
+    }
+
+    showBars([m[0], m[1], m[2]]);
+
+    setTimeout(() => {
+        animate();
+    }, speed.value);
+}
+
+
+generateArray();
+
+generateBtn.addEventListener("click", generateArray);
+
+document.querySelector("#bubbleSort").addEventListener("click", bubbleSort);
+
+document.querySelector("#selectionSort").addEventListener("click", selectionSort);
+
+document.querySelector("#insertionSort").addEventListener("click", insertionSort);
diff --git a/Sorting Visualizer/style.css b/Sorting Visualizer/style.css
@@ -0,0 +1,82 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+}
+
+body {
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+.wrapper {
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    gap: 2rem ;
+    padding: 2rem;
+
+}
+
+.heading {
+    font-size: 3rem;
+    text-align: center;
+    background: linear-gradient(#F2B433 100%, #EEB238 100%, #D48300 100%);;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.box-container {
+    height: 40rem;
+    width: 80rem;
+    border: 3px solid white;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 0.4rem;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+}
+
+.btn {
+    color: white;
+    font-size: 1.8rem;
+    border: 2px solid white;
+    padding: 4px 6px;
+    cursor: pointer;
+    border-radius: 5px;
+    background-color: crimson;
+}
+
+.btn:hover{
+    background-color: rgba(220, 20, 60, 0.9);
+}
+
+.bar {
+    background-color: rgb(9, 250, 250);
+    width: 20px;
+}
+
+@media screen and (max-width : 700px) {
+    .bar {
+        width: 15px;
+    }
+}
+
+@media screen and (max-width : 500px) {
+    .bar {
+        width: 7px;
+    }
+}
diff --git a/index.html b/index.html
@@ -354,6 +354,18 @@ <h3>Chessboard</h3>
           </a>
         </div>
       </div>
+
+      <div class="box puzzle hide">
+        <span>Sorting Visualizer</span>
+        <div class="content">
+          <h1>Sorting Visualizer</h1>
+          <h3>Puzzle</h3>
+          <p>Sorting made simple !</p>
+          <a href="./Sorting Visualizer/index.html">
+            <div class="trynow-button">TRY NOW!</div>
+          </a>
+        </div>
+      </div>
       <!-- PUZZLE SECTION END -->
 
       <!-- GAMES SECTION BEGIN-->
@@ -571,6 +583,8 @@ <h3>Game</h3>
           </a>
         </div>
       </div>
+
+
 
     </div>
     <!-- GAME SECTION ENDS HERE -->