From 7f6b68feb4f139cc0506dc55482db2d8b1591865 Mon Sep 17 00:00:00 2001
From: vishal2005025 <vishalmalyan2005@gmail.com>
Date: Mon, 23 Oct 2023 14:51:13 +0530
Subject: [PATCH] sorting visualizer task complete

---
 bubble_sort.html    | 188 ++++++++++++++++++++++++++++++++++++++++++++
 index.html          |  75 ++++++++++++++++++
 insertion_sort.html | 183 ++++++++++++++++++++++++++++++++++++++++++
 selection_sort.html | 185 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 631 insertions(+)
 create mode 100644 bubble_sort.html
 create mode 100644 index.html
 create mode 100644 insertion_sort.html
 create mode 100644 selection_sort.html
diff --git a/bubble_sort.html b/bubble_sort.html
new file mode 100644
index 0000000..9b3db74
--- /dev/null
+++ b/bubble_sort.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bubble  Sort Visualization</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-image: url('https://img.freepik.com/free-vector/gradient-style-network-connection-background_23-2148876716.jpg?size=626&ext=jpg&ga=GA1.1.508824631.1698051133&semt=ais');
+        }
+        
+        #inputForm {
+            margin-bottom: 20px;
+        } 
+        
+        #barsContainer {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 700px;
+        }
+        
+        .bar {
+           
+            width: 80px;
+            margin-right: 5px;
+            display: inline-block;
+            background-color:white;
+            height: 20px;
+            transition: background-color 0.5s;
+            position: relative;
+        }
+        
+        .bar span {
+            position: absolute;
+            bottom: -20px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 20px;
+            color:white;
+        }
+        label{
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+            font-size: xx-large;
+            margin: 10px;
+            font: bolder;
+            color: white;
+            
+        }
+        button{
+            padding: 10px;
+            width: 200px;
+            margin-top: 50px;
+            font: bolder;
+            font-size: xx-large;
+            border-radius: 5px;
+            border-color:aliceblue;
+            text-align: center;
+            margin-left: 40%;
+            background-color: orangered;
+            color: white;
+        }
+        button:hover {
+            background: #03f40f;
+            color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 0 5px #03f40f,
+              0 0 25px #03f40f,
+              0 0 50px #03f40f,
+              0 0 100px #03f40f;
+              transition: 0.5s;
+        }
+
+        input{
+            box-sizing: border-box;
+            height: 35px;
+            width: 400px;
+            border-radius: 8px;
+            background-color: white;
+            font-size: x-large;
+        }
+        h1{
+            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+            font-size: 50px;
+            color:white;
+            letter-spacing: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="inputForm">
+        <form onsubmit="startVisualization(event)">
+            <h1>Bubble Sort Visualization</h1>
+            <label for="arraySize" >Enter Array size:</label>
+            <input type="number" id="arraySize" name="arraySize" required>
+            <br>
+            <label for="arrayElements">Enter Array elements:</label>
+            <input type="text" id="arrayElements" name="arrayElements" required placeholder="input number less than 70">
+            <br>
+            <button id="mybutton" type="submit">Sort</button>
+        </form>
+    </div>
+
+    <div id="barsContainer">
+        <div id="bars"></div>
+    </div>
+
+    <script>
+        // Function to create and display bars representing array elements
+        function displayBars(array, selectedIndexes = []) {
+            var barsDiv = document.getElementById("bars");
+            barsDiv.innerHTML = "";
+
+            for (var i = 0; i < array.length; i++) {
+                var barHeight = array[i] * 10; // Scale factor to make bars visible
+                var bar = document.createElement("div");
+                bar.className = "bar";
+                if (selectedIndexes.includes(i)) {
+                    bar.style.backgroundColor = "red";
+                }
+                bar.style.height = barHeight + "px";
+
+                var valueSpan = document.createElement("span");
+                valueSpan.textContent = array[i];
+
+                bar.appendChild(valueSpan);
+                barsDiv.appendChild(bar);
+            }
+        }
+
+        // Function to perform selection sort and update the visualization
+        async function bubbleSort(array) {
+            for (var i = 0; i < array.length; i++) {
+                var swaped= false;
+
+                for (var j = 0; j < array.length-i-1; j++) {
+                    if (array[j+1] < array[j]) {
+
+                    // Swap elements
+                    var temp = array[j+1];
+                    array[j+1] = array[j];
+                    array[j] = temp;
+
+                    }
+                    // Update visualization
+                    displayBars(array, [j+1, j]);
+                    await sleep(500); // Delay for visualization
+                }
+                if (swaped)
+                {
+                    break;
+                }
+            }
+
+            // Final visualization with sorted array
+            displayBars(array);
+        }
+
+        // Helper function for delaying execution
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        // Function to start the visualization
+        async function startVisualization(event) {
+            event.preventDefault(); // Prevent form submission
+
+            var arraySizeInput = document.getElementById("arraySize");
+            var arrayElementsInput = document.getElementById("arrayElements");
+
+            var n = parseInt(arraySizeInput.value);
+            var array = arrayElementsInput.value
+                .split(" ")
+                .map(element => parseInt(element));
+
+            await bubbleSort(array);
+
+            console.log("Sorted array:", array);
+        }
+    </script>
+</body>
+</html>
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3f00efe
--- /dev/null
+++ b/index.html
@@ -0,0 +1,75 @@
+<!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>Document</title>
+    <style>
+        body{
+            background-image: url('https://img.freepik.com/free-vector/background-realistic-abstract-technology-particle_23-2148431735.jpg?size=626&ext=jpg');
+            
+        }
+
+        h1{
+            font-size: 8vw;
+            color: white;
+            text-transform: uppercase;
+            text-align: center;
+        }
+        p{
+            color: white ;
+            font-size: 40px;
+            text-align: center;
+            text-transform: uppercase;
+        }
+        a{
+            text-decoration: none;
+            font-size:50px; 
+            border-radius: 50%;
+            color: white;
+
+        }
+        .sort{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 30px;
+           justify-content: center;
+        }
+        button{
+           
+            font: bolder;
+           
+            border-radius: 5px;
+            border-color:aliceblue;
+            text-align: center;
+            
+            background-color: orangered;
+            color: white;
+        }
+        button:hover {
+            background: #03f40f;
+            color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 0 5px #03f40f,
+              0 0 25px #03f40f,
+              0 0 50px #03f40f,
+              0 0 100px #03f40f;
+              transition: 0.5s;
+        }
+
+    </style>
+  </head>
+  <body>
+    <div class="header"> 
+    <h1>welcome!</h1>
+    <p>which type of sorting method you want to understand. </p>
+    <div class="sort">
+        <button><a href="bubble_sort.html" target="_blank">BUBBLE SORT</a></button>
+        <button><a href="insertion_sort.html" target="_blank">INSERTION SORT</a></button>
+        <button><a href="selection_sort.html" target="_blank">SELECTION SORT</a></button>
+    </div>
+    
+  </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/insertion_sort.html b/insertion_sort.html
new file mode 100644
index 0000000..4cbc64e
--- /dev/null
+++ b/insertion_sort.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Insertion Sort Visualization</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-image: url('https://img.freepik.com/free-vector/gradient-style-network-connection-background_23-2148876716.jpg?size=626&ext=jpg&ga=GA1.1.508824631.1698051133&semt=ais');
+        }
+        
+        #inputForm {
+            margin-bottom: 20px;
+        } 
+        
+        #barsContainer {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 700px;
+        }
+        
+        .bar {
+           
+            width: 80px;
+            margin-right: 5px;
+            display: inline-block;
+            background-color: white;
+            height: 20px;
+            transition: background-color 0.5s;
+            position: relative;
+        }
+        
+        .bar span {
+            position: absolute;
+            bottom: -20px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 20px;
+            color: white;
+        }
+        label{
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+            font-size: xx-large;
+            margin: 10px;
+            font: bolder;
+            color: white;
+            
+        }
+
+        button{
+            padding: 10px;
+            width: 200px;
+            margin-top: 50px;
+            font: bolder;
+            font-size: xx-large;
+            border-radius: 5px;
+            border-color:aliceblue;
+            text-align: center;
+            margin-left: 40%;
+            background-color: rgb(9, 255, 0);
+            color: white;
+        }
+        button:hover {
+            background: orangered;
+            color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 0 5px orangered,
+              0 0 25px orangered,
+              0 0 50px orangered,
+              0 0 100px orangered;
+              transition: 0.5s;
+        }
+        input{
+            box-sizing: border-box;
+            height: 35px;
+            width: 400px;
+            border-radius: 8px;
+            background-color: white;
+            font-size: x-large;
+        }
+        h1{
+            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+            font-size: 50px;
+            color:white;
+            letter-spacing: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="inputForm">
+        <form onsubmit="startVisualization(event)">
+            <h1>Insertion Sort Visualization</h1>
+            <label for="arraySize" >Enter Array Size:</label>
+            <input type="number" id="arraySize" name="arraySize" required>
+            <br>
+            <label for="arrayElements">Enter Array Elements:</label>
+            <input type="text" id="arrayElements" name="arrayElements" required placeholder="input number less than 70">
+            <br>
+            <button id="mybutton" type="submit">Sort</button>
+        </form>
+    </div>
+
+    <div id="barsContainer">
+        <div id="bars"></div>
+    </div>
+
+    <script>
+        // Function to create and display bars representing array elements
+        function displayBars(array, selectedIndexes = []) {
+            var barsDiv = document.getElementById("bars");
+            barsDiv.innerHTML = "";
+
+            for (var i = 0; i < array.length; i++) {
+                var barHeight = array[i] * 10; // Scale factor to make bars visible
+                var bar = document.createElement("div");
+                bar.className = "bar";
+                if (selectedIndexes.includes(i)) {
+                    bar.style.backgroundColor = "red";
+                }
+                bar.style.height = barHeight + "px";
+
+                var valueSpan = document.createElement("span");
+                valueSpan.textContent = array[i];
+
+                bar.appendChild(valueSpan);
+                barsDiv.appendChild(bar);
+            }
+        }
+
+        // Function to perform selection sort and update the visualization
+        async function insertionSort(array) {
+            for (var i = 0; i < array.length; i++) {
+                var temp = array[i];
+                j=i-1;
+
+                while (j >= 0 && temp < array[j])
+                {
+                    array[j + 1] = array[j];
+                    j--;
+
+                // Update visualization
+                displayBars(array, [j+1]);
+                await sleep(500); // Delay for visualization
+
+                }
+                array[j + 1] = temp;
+
+                }
+            // Final visualization with sorted array
+            displayBars(array);
+        }
+
+        // Helper function for delaying execution
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        // Function to start the visualization
+        async function startVisualization(event) {
+            event.preventDefault(); // Prevent form submission
+
+            var arraySizeInput = document.getElementById("arraySize");
+            var arrayElementsInput = document.getElementById("arrayElements");
+
+            var n = parseInt(arraySizeInput.value);
+            var array = arrayElementsInput.value
+                .split(" ")
+                .map(element => parseInt(element));
+
+            await insertionSort(array);
+
+            console.log("Sorted array:", array);
+        }
+    </script>
+    
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/selection_sort.html b/selection_sort.html
new file mode 100644
index 0000000..14ca00b
--- /dev/null
+++ b/selection_sort.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Selection  Sort Visualization</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-image: url('https://img.freepik.com/free-vector/gradient-style-network-connection-background_23-2148876716.jpg?size=626&ext=jpg&ga=GA1.1.508824631.1698051133&semt=ais');
+        }
+        
+        #inputForm {
+            margin-bottom: 20px;
+        } 
+        
+        #barsContainer {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 700px;
+        }
+        
+        .bar {
+           
+            width: 80px;
+            margin-right: 5px;
+            display: inline-block;
+            background-color: white;
+            height: 20px;
+            transition: background-color 0.5s;
+            position: relative;
+        }
+        
+        .bar span {
+            position: absolute;
+            bottom: -20px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 20px;
+            color: white;
+        }
+        label{
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+            font-size: xx-large;
+            margin: 10px;
+            font: bolder;
+            color: white;
+            
+        }
+        
+        button{
+            padding: 10px;
+            width: 200px;
+            margin-top: 50px;
+            font: bolder;
+            font-size: xx-large;
+            border-radius: 5px;
+            border-color:aliceblue;
+            text-align: center;
+            margin-left: 40%;
+            background-color: rgb(9, 255, 0);
+            color: white;
+        }
+        button:hover {
+            background: orangered;
+            color: #fff;
+            border-radius: 5px;
+            box-shadow: 0 0 5px orangered,
+              0 0 25px orangered,
+              0 0 50px orangered,
+              0 0 100px orangered;
+              transition: 0.5s;
+        }
+        input{
+            box-sizing: border-box;
+            height: 35px;
+            width: 400px;
+            border-radius: 8px;
+            background-color: white;
+            font-size: x-large;
+        }
+        h1{
+            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+            font-size: 50px;
+            color:white;
+            letter-spacing: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="inputForm">
+        <form onsubmit="startVisualization(event)">
+            <h1>Selection Sort Visualization</h1>
+            <label for="arraySize" >Enter Array size:</label>
+            <input type="number" id="arraySize" name="arraySize" required>
+            <br>
+            <label for="arrayElements">Enter Array elements:</label>
+            <input type="text" id="arrayElements" name="arrayElements" required placeholder="input number less than 70">
+            <br>
+            <button id="mybutton" type="submit">Sort</button>
+        </form>
+    </div>
+
+    <div id="barsContainer">
+        <div id="bars"></div>
+    </div>
+
+    <script>
+        // Function to create and display bars representing array elements
+        function displayBars(array, selectedIndexes = []) {
+            var barsDiv = document.getElementById("bars");
+            barsDiv.innerHTML = "";
+
+            for (var i = 0; i < array.length; i++) {
+                var barHeight = array[i] * 10; // Scale factor to make bars visible
+                var bar = document.createElement("div");
+                bar.className = "bar";
+                if (selectedIndexes.includes(i)) {
+                    bar.style.backgroundColor = "red";
+                }
+                bar.style.height = barHeight + "px";
+
+                var valueSpan = document.createElement("span");
+                valueSpan.textContent = array[i];
+
+                bar.appendChild(valueSpan);
+                barsDiv.appendChild(bar);
+            }
+        }
+
+        // Function to perform selection sort and update the visualization
+        async function selectionSort(array) {
+            for (var i = 0; i < array.length - 1; i++) {
+                var minIndex = i;
+
+                for (var j = i + 1; j < array.length; j++) {
+                    if (array[j] < array[minIndex]) {
+                        minIndex = j;
+                    }
+                }
+
+                // Swap elements
+                var temp = array[i];
+                array[i] = array[minIndex];
+                array[minIndex] = temp;
+
+                // Update visualization
+                displayBars(array, [i, minIndex]);
+                await sleep(500); // Delay for visualization
+            }
+
+            // Final visualization with sorted array
+            displayBars(array);
+        }
+
+        // Helper function for delaying execution
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        // Function to start the visualization
+        async function startVisualization(event) {
+            event.preventDefault(); // Prevent form submission
+
+            var arraySizeInput = document.getElementById("arraySize");
+            var arrayElementsInput = document.getElementById("arrayElements");
+
+            var n = parseInt(arraySizeInput.value);
+            var array = arrayElementsInput.value
+                .split(" ")
+                .map(element => parseInt(element));
+
+            await selectionSort(array);
+
+            console.log("Sorted array:", array);
+        }
+    </script>
+</body>
+</html>
+
+
