-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 1262484
Showing
6 changed files
with
645 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
||
|
||
|
||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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`; | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.