Selection sort

Algorithm/SelectionSort.js

@@ -0,0 +1,356 @@
+const codeDisplay = document.querySelector('.tab-content .tab-pane.active pre code');
+const languageTabs = document.querySelectorAll('#languageTabs a');
+let array = [];
+let stop = false;
+const delayTime = 300;
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+// Language code snippets
+const codeSnippets = {
+    java: `public static void selectionSort(int[] arr) {
+        int n = arr.length;
+        for (int i = 0; i < n - 1; i++) {
+            int minIdx = i;
+            for (int j = i + 1; j < n; j++) {
+                if (arr[j] < arr[minIdx]) {
+                    minIdx = j;
+                }
+            }
+            int temp = arr[minIdx];
+            arr[minIdx] = arr[i];
+            arr[i] = temp;
+        }
+    }
+
+`,
+    c: `void selectionSort(int arr[], int n) {
+    for (int i = 0; i < n-1; i++) {
+        int minIdx = i;
+        for (int j = i+1; j < n; j++) {
+            if (arr[j] < arr[minIdx]) {
+                minIdx = j;
+            }
+        }
+        int temp = arr[minIdx];
+        arr[minIdx] = arr[i];
+        arr[i] = temp;
+    }
+}
+`,
+    cpp: `void selectionSort(int arr[], int n) {
+    for (int i = 0; i < n-1; i++) {
+        int minIdx = i;
+        for (int j = i+1; j < n; j++) {
+            if (arr[j] < arr[minIdx]) {
+                minIdx = j;
+            }
+        }
+        swap(arr[minIdx], arr[i]);
+    }
+}`,
+    python: `def selection_sort(arr):
+                        n = len(arr)
+                        for i in range(n):
+                            min_idx = i
+                            for j in range(i+1, n):
+                                if arr[j] < arr[min_idx]:
+                                    min_idx = j
+                            arr[i], arr[min_idx] = arr[min_idx], arr[i]`
+};
+
+// Event listener for language tabs
+languageTabs.forEach(tab => {
+    tab.addEventListener('click', event => {
+        const language = event.target.getAttribute('href').substring(1);
+        codeDisplay.innerText = codeSnippets[language];
+    });
+});
+
+// Set the initial code display content
+codeDisplay.innerText = codeSnippets.java;
+
+// Function to submit array input
+function submit() {
+    const input = document.getElementById("array").value;
+    array = input.split(" ").map(Number);
+    visualizeArray(array);
+}
+
+// Function to visualize the array
+function visualizeArray(arr) {
+    const container = document.getElementById("visualization");
+    container.innerHTML = "";
+    const maxVal = Math.max(...arr);
+    const containerWidth = container.offsetWidth;
+    const barWidth = Math.max(30, Math.min(100, containerWidth / arr.length - 2));
+
+    arr.forEach((val, idx) => {
+        const barContainer = document.createElement("div");
+        barContainer.className = "bar-container";
+        barContainer.style.width = `${barWidth}px`;
+        barContainer.style.left = `${idx * (barWidth + 2)}px`;
+
+        const label = document.createElement("div");
+        label.className = "bar-label";
+        label.textContent = val;
+
+        const bar = document.createElement("div");
+        bar.className = "bar";
+        bar.style.height = `${(val / maxVal) * 300}px`;
+        bar.style.width = `${barWidth}px`;
+        bar.id = `bar-${idx}`;
+
+        barContainer.appendChild(label);
+        barContainer.appendChild(bar);
+        container.appendChild(barContainer);
+    });
+}
+
+// Function to update bars
+async function updateBars() {
+    const maxVal = Math.max(...array);
+    array.forEach((val, idx) => {
+        const container = document.getElementById(`bar-${idx}`).parentElement;
+        const label = container.querySelector('.bar-label');
+        const bar = container.querySelector('.bar');
+
+        label.textContent = val;
+        bar.style.height = `${(val / maxVal) * 300}px`;
+    });
+    await delay(delayTime);
+}
+
+// Function to swap array elements
+async function swap(i, j) {
+    const temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+
+    const container1 = document.getElementById(`bar-${i}`).parentElement;
+    const container2 = document.getElementById(`bar-${j}`).parentElement;
+
+    const tempLeft = container1.style.left;
+    container1.style.left = container2.style.left;
+    container2.style.left = tempLeft;
+
+    container1.querySelector('.bar').id = `bar-${j}`;
+    container2.querySelector('.bar').id = `bar-${i}`;
+
+    await updateBars();
+}
+
+async function selectionSort() {
+    for (let i = 0; i < array.length; i++) {
+        let minIdx = i;
+        document.getElementById(`bar-${i}`).classList.add("comparing");
+        for (let j = i + 1; j < array.length; j++) {
+            if (stop) return;
+            document.getElementById(`bar-${j}`).classList.add("comparing");
+            await delay(delayTime);
+            if (array[j] < array[minIdx]) {
+                minIdx = j;
+            }
+            document.getElementById(`bar-${j}`).classList.remove("comparing");
+        }
+        if (minIdx !== i) {
+            await swap(i, minIdx);
+        }
+        document.getElementById(`bar-${i}`).classList.remove("comparing");
+        document.getElementById(`bar-${i}`).classList.add("sorted");
+    }
+}
+
+// Function to highlight bars
+async function highlightBars(indices, className) {
+    indices.forEach(index => {
+        document.getElementById(`bar-${index}`).classList.remove("comparing", "sorted");
+        if (className) {
+            document.getElementById(`bar-${index}`).classList.add(className);
+        }
+    });
+    await delay(delayTime);
+}
+
+// Function to update a single bar
+async function updateSingleBar(index) {
+    const maxVal = Math.max(...array);
+    const container = document.getElementById(`bar-${index}`).parentElement;
+    const label = container.querySelector('.bar-label');
+    const bar = container.querySelector('.bar');
+
+    label.textContent = array[index];
+    bar.style.height = `${(array[index] / maxVal) * 300}px`;
+    await delay(delayTime);
+}
+
+// Function to reset the visualization
+function reset() {
+    stop = false;
+    visualizeArray(array);
+}
+
+// Function to handle stop button click
+function stopClicked() {
+    document.getElementById("resume").disabled = false;
+    document.getElementById("reset").disabled = false;
+}
+
+// Functions to enable and disable buttons
+function disableSubmitButton() {
+    document.getElementById("submit").disabled = true;
+    document.getElementById("start").disabled = true;
+    document.getElementById("resume").disabled = true;
+    document.getElementById("reset").disabled = true;
+}
+
+function enableSubmitButton() {
+    document.getElementById("submit").disabled = false;
+    document.getElementById("start").disabled = false;
+    document.getElementById("resume").disabled = false;
+    document.getElementById("reset").disabled = false;
+}
+
+// Function to start the sorting
+async function startSort() {
+    disableSubmitButton();
+    reset();
+    const sortMethod = document.getElementById("sortSelect").value;
+    switch(sortMethod) {
+        // case "bubble":
+        //     await bubbleSort();
+        //     break;
+        // Add other sorting algorithms here
+        case "selection":
+            await selectionSort();
+            break;
+        // case "insertion":
+        //     await insertionSort();
+        //     break;
+        // case "merge":
+        //     await mergeSortWrapper();
+        //     break;
+        // case "heap":
+        //     await heapSort();
+        //     break;
+        // case "comb":
+        //     await combSort();
+        //     break;
+        // case "quick":
+        //     await quickSort();
+        //     break;
+    }
+    enableSubmitButton();
+}
+
+// Function to show a step in the tour
+function showStep(step) {
+    const tourPopup = document.getElementById("tourPopup");
+    const targetElement = document.getElementById(tourSteps[step].target);
+    const targetRect = targetElement.getBoundingClientRect();
+
+    let top = targetRect.bottom + 10;
+    let left = targetRect.left + targetRect.width / 2 - 150;
+
+    if (left < 10) left = 10;
+    if (left + 300 > window.innerWidth) left = window.innerWidth - 310;
+
+    if (top + 200 > window.innerHeight) {
+        top = targetRect.top - 210;
+        if (top < 10) {
+            top = 10;
+        }
+    }
+
+    top = Math.max(10, Math.min(top, window.innerHeight - 210));
+
+    tourPopup.style.left = `${left}px`;
+    tourPopup.style.top = `${top}px`;
+
+    document.getElementById("tourTitle").textContent = tourSteps[step].title;
+    document.getElementById("tourDescription").textContent = tourSteps[step].description;
+
+    if (step === tourSteps.length - 1) {
+        document.getElementById("tourNext").textContent = "Finish";
+    } else {
+        document.getElementById("tourNext").textContent = "Next";
+    }
+
+    targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+}
+
+// Event listener for tour next button
+document.getElementById("tourNext").addEventListener("click", () => {
+    currentStep++;
+    if (currentStep < tourSteps.length) {
+        showStep(currentStep);
+    } else {
+        document.getElementById("tourOverlay").style.display = "none";
+        currentStep = 0;
+    }
+});
+
+// Start the tour when the page loads
+window.addEventListener("load", function() {
+    loader.style.display = "none";
+    startTour();
+});
+
+// Event listener for tour skip button
+document.getElementById("tourSkip").addEventListener("click", () => {
+    document.getElementById("tourOverlay").style.display = "none";
+    currentStep = 0;
+});
+
+// Loader
+var loader = document.getElementById("Loader");
+window.addEventListener("load", function() {
+    loader.style.display = "none";
+});
+
+const description = document.querySelector('.bubble-sort-description');
+
+const bubbleSortAlgorithm = `
+1.  Iterate from the first element to the last element.
+2.  For each position, assume the current position is the minimum.
+3.  Compare the current element with the rest of the elements in the unsorted part of the array.
+4.  If any element is smaller than the current element, mark it as the new minimum.
+5.  Swap the current element with the new minimum element.
+6.  Move the boundary of the sorted part one step to the right.
+7.  Repeat until the entire array is sorted.
+`;
+
+description.querySelector('pre code.algorithm').innerText = bubbleSortAlgorithm;
+$(document).ready(function() {
+    $('.dropdown-toggle').dropdown();
+  });
+
+  const topButton = document.getElementById("topbtn");
+  window.onscroll = function () {
+      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+          topButton.style.display = "block";
+      } else {
+          topButton.style.display = "none";
+      }
+  };
+  topButton.onclick = function (event) {
+    event.preventDefault(); 
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'  
+    });
+};
+  const upimage = document.getElementByClass("upimage");
+  window.onscroll = function () {
+      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+          topButton.style.display = "block";
+      } else {
+          topButton.style.display = "none";
+      }
+  };
+  topButton.onclick = function (event) {
+      event.preventDefault(); 
+      window.scrollTo({
+          top: 0,
+          behavior: 'smooth'  
+      });
+  };