Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
ymadhumohanreddy authored Oct 2, 2024
0 parents commit 1262484
Show file tree
Hide file tree
Showing 6 changed files with 645 additions and 0 deletions.
63 changes: 63 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.



---
95 changes: 95 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -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;
47 changes: 47 additions & 0 deletions helper.js
Original file line number Diff line number Diff line change
@@ -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`;
}
};
81 changes: 81 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet" />

<link rel="shortcut icon" type="image/x-icon" href="https://cdn6.aptoide.com/imgs/5/4/6/546bcebd4c2c3d0c7f0dd7cbab118826_icon.png" />
<link rel="stylesheet" href="style.css">
<title>Sorting visualizer</title>
</head>
<body>
<div class="nav-container">
<h2 class="title" onclick="window.location.reload">
Sorting visualizer
</h2>
<div class="navbar" id="navbar">
<a id="random" onclick="RenderScreen()">Generate array</a>
<span class="options">
<select name="select sort algorithm" id="menu" class="algo-menu">
<option value="0">Choose algorithm</option>
<option value="1">Bubble Sort</option>
<option value="2">Selection Sort</option>
<option value="3">Insertion Sort</option>
<option value="4">Merge Sort</option>
<option value="5">Quick Sort</option>
</select>
</span>
<span class="options">
<select name="select array size" id="menu" class="size-menu">
<option value="0">Array size</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</span>
<span class="options">
<select name="speed of visualization" id="menu" class="speed-menu">
<option value="0">Speed</option>
<option value="0.5">0.50x</option>
<option value="0.75">0.75x</option>
<option value="1">1.00x</option>
<option value="2">2.00x</option>
<option value="4">4.00x</option>
</select>
</span>
<a class="start">Sort</a>
<a class="icon">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<div class="center">
<div class="array"></div>
</div>
<footer class="footer">
<p>"Life is like an unsorted list; sorting out the right priorities makes all the difference."</p>
<p><a href="https://www.linkedin.com/in/madhu-yeddula-469583274/" target="_blank" class="link">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
<a href="https://github.com/ymadhumohanreddy" target="_blank" class="link">
<i class="fa fa-github" aria-hidden="true"></i>
</p>
</footer>
<script src="app.js"></script>
<script src="helper.js"></script>
<script src="sort-algorithms.js"></script>
</body>
</html>
Loading

0 comments on commit 1262484

Please sign in to comment.