From 1262484ff117e4fd82994d89c291b2397ce35927 Mon Sep 17 00:00:00 2001
From: Madhu Mohan Reddy <128889553+ymadhumohanreddy@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:57:22 +0530
Subject: [PATCH] Add files via upload
---
README.md | 63 +++++++++++++++
app.js | 95 ++++++++++++++++++++++
helper.js | 47 +++++++++++
index.html | 81 +++++++++++++++++++
sort-algorithms.js | 162 +++++++++++++++++++++++++++++++++++++
style.css | 197 +++++++++++++++++++++++++++++++++++++++++++++
6 files changed, 645 insertions(+)
create mode 100644 README.md
create mode 100644 app.js
create mode 100644 helper.js
create mode 100644 index.html
create mode 100644 sort-algorithms.js
create mode 100644 style.css
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9f0b6dd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,63 @@
+
+
+---
+
+# Sorting Visualizer
+
+This is a **Sorting Visualizer** project built using **HTML**, **CSS**, and **JavaScript**. It provides a visual representation of different sorting algorithms, allowing users to see how various algorithms operate step-by-step on randomly generated arrays.
+
+## Features
+
+- **Sorting Algorithms**:
+ - Bubble Sort
+ - Selection Sort
+ - Insertion Sort
+ - Merge Sort
+ - Quick Sort
+- **Custom Array Size**: Users can adjust the size of the array.
+- **Speed Control**: Control the visualization speed of the sorting process.
+- **Generate New Array**: Users can generate a new random array to visualize the sorting algorithms on different datasets.
+
+
+
+
+## Project Structure
+
+- **`index.html`**: The main HTML file that defines the structure of the webpage.
+- **`styles.css`**: The CSS file for styling the visualizer, layout, buttons, and overall appearance.
+- **`app.js`**: The core JavaScript file containing the logic for sorting algorithms and the visualization.
+
+## Installation
+
+1. Clone the repository:
+ ```bash
+ git clone https://github.com/yourusername/sorting-visualizer.git
+ ```
+2. Open the project folder:
+ ```bash
+ cd sorting-visualizer
+ ```
+3. Open `index.html` in any modern web browser:
+ ```bash
+ open index.html
+ ```
+
+## Usage
+
+1. Open the `index.html` file in your browser.
+2. Use the controls on the page to:
+ - **Generate a new array**: Click the "Generate New Array" button.
+ - **Choose an algorithm**: Select a sorting algorithm from the dropdown.
+ - **Adjust array size**: Use the slider to change the size of the array.
+ - **Control speed**: Use the speed slider to slow down or speed up the visualization.
+ - **Start sorting**: Click on the "Sort" button to begin visualizing the sorting process.
+
+## Technologies Used
+
+- **HTML**: For structuring the page and elements.
+- **CSS**: For styling the interface and array bars.
+- **JavaScript**: For implementing the sorting algorithms and controlling the visualization.
+
+
+
+---
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..cd103a6
--- /dev/null
+++ b/app.js
@@ -0,0 +1,95 @@
+"use strict";
+const start = async () => {
+ let algoValue = Number(document.querySelector(".algo-menu").value);
+ let speedValue = Number(document.querySelector(".speed-menu").value);
+
+ if (speedValue === 0) {
+ speedValue = 1;
+ }
+ if (algoValue === 0) {
+ alert("No Algorithm Selected");
+ return;
+ }
+
+ let algorithm = new sortAlgorithms(speedValue);
+ if (algoValue === 1) await algorithm.BubbleSort();
+ if (algoValue === 2) await algorithm.SelectionSort();
+ if (algoValue === 3) await algorithm.InsertionSort();
+ if (algoValue === 4) await algorithm.MergeSort();
+ if (algoValue === 5) await algorithm.QuickSort();
+};
+
+const RenderScreen = async () => {
+ let algoValue = Number(document.querySelector(".algo-menu").value);
+ await RenderList();
+};
+
+const RenderList = async () => {
+ let sizeValue = Number(document.querySelector(".size-menu").value);
+ await clearScreen();
+
+ let list = await randomList(sizeValue);
+ const arrayNode = document.querySelector(".array");
+ console.log(arrayNode);
+ console.log(list);
+ for (const element of list) {
+ const node = document.createElement("div");
+ node.className = "cell";
+ node.setAttribute("value", String(element));
+ node.style.height = `${3.8 * element}px`;
+ arrayNode.appendChild(node);
+ }
+};
+
+const RenderArray = async (sorted) => {
+ let sizeValue = Number(document.querySelector(".size-menu").value);
+ await clearScreen();
+
+ let list = await randomList(sizeValue);
+ if (sorted) list.sort((a, b) => a - b);
+
+ const arrayNode = document.querySelector(".array");
+ const divnode = document.createElement("div");
+ divnode.className = "s-array";
+
+ for (const element of list) {
+ const dnode = document.createElement("div");
+ dnode.className = "s-cell";
+ dnode.innerText = element;
+ divnode.appendChild(dnode);
+ }
+ arrayNode.appendChild(divnode);
+};
+
+const randomList = async (Length) => {
+ let list = new Array();
+ let lowerBound = 1;
+ let upperBound = 100;
+
+ for (let counter = 0; counter < Length; ++counter) {
+ let randomNumber = Math.floor(
+ Math.random() * (upperBound - lowerBound + 1) + lowerBound
+ );
+ list.push(parseInt(randomNumber));
+ }
+ return list;
+};
+
+const clearScreen = async () => {
+ document.querySelector(".array").innerHTML = "";
+};
+
+const response = () => {
+ let Navbar = document.querySelector(".navbar");
+ if (Navbar.className === "navbar") {
+ Navbar.className += " responsive";
+ } else {
+ Navbar.className = "navbar";
+ }
+};
+
+document.querySelector(".icon").addEventListener("click", response);
+document.querySelector(".start").addEventListener("click", start);
+document.querySelector(".size-menu").addEventListener("change", RenderScreen);
+document.querySelector(".algo-menu").addEventListener("change", RenderScreen);
+window.onload = RenderScreen;
diff --git a/helper.js b/helper.js
new file mode 100644
index 0000000..49f3b47
--- /dev/null
+++ b/helper.js
@@ -0,0 +1,47 @@
+"use strict";
+class Helper {
+ constructor(time, list = []) {
+ this.time = parseInt(400/time);
+ this.list = list;
+ }
+
+ mark = async (index) => {
+ this.list[index].setAttribute("class", "cell current");
+ }
+
+ markSpl = async (index) => {
+ this.list[index].setAttribute("class", "cell min");
+ }
+
+ unmark = async (index) => {
+ this.list[index].setAttribute("class", "cell");
+ }
+
+ pause = async() => {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ resolve();
+ }, this.time);
+ });
+ }
+
+ compare = async (index1, index2) => {
+ await this.pause();
+ let value1 = Number(this.list[index1].getAttribute("value"));
+ let value2 = Number(this.list[index2].getAttribute("value"));
+ if(value1 > value2) {
+ return true;
+ }
+ return false;
+ }
+
+ swap = async (index1, index2) => {
+ await this.pause();
+ let value1 = this.list[index1].getAttribute("value");
+ let value2 = this.list[index2].getAttribute("value");
+ this.list[index1].setAttribute("value", value2);
+ this.list[index1].style.height = `${3.8*value2}px`;
+ this.list[index2].setAttribute("value", value1);
+ this.list[index2].style.height = `${3.8*value1}px`;
+ }
+};
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d0edb92
--- /dev/null
+++ b/index.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Sorting visualizer
+
+
+
+
+ Sorting visualizer
+
+
+