Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonamkadam25
sonamkadam25 committed May 29, 2024
0 parents commit ea0d005
Show file tree
Hide file tree
Showing 6 changed files with 457 additions and 0 deletions.
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Sorting_Visualizer

A web application showcasing the inner workings of sorting algorithms.

Implemented algorithms:
1) Bubble sort
2) Selection sort
3) Insertion sort
4) Merge sort
5) Quick sort
6) Heap sort

Features:
1) Colored representation of step being executed.
1.1) Blue:default
1.2) Yellow: Being compared
1.3) Red: Identified as in incorrect position and to be moved
1.4) Green: In correct position
2) 3 Controls for visualizations
2.1) Speed of visualization (5 speed levels)
2.2) Data size ()
2.3) Generation of new data (Randomly generate new data).
4) Time and Space complexity of algorithm being visualized.

8 changes: 8 additions & 0 deletions VS_Sorting_Visualizer.code-workspace
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}
89 changes: 89 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sorting Visualizer</title>
<link rel="stylesheet" href="./css/style.css" />

</head>
<body>

<header>
<nav>
<div class="array-inputs">
<p>Size of the array:</p>
<input
id="a_size"
type="range"
min="20"
max="150"
step="1"
value="80"
/>
<p>Speed of the algorithm:</p>
<input id="a_speed" type="range" min="1" max="5" step="1" value="4" />
<button id="a_generate">Generate New Array!</button>
</div>

<div class="header_right">
<p class="nav-heading">Sorting visualizer</p>
<div class="algos">
<button style="font-size: 15px">Bubble</button>
<button style="font-size: 15px">Selection</button>
<button style="font-size: 15px">Insertion</button>
<button style="font-size: 15px">Merge</button>
<button style="font-size: 15px">Quick</button>
<button style="margin-right: 0px; font-size: 15px">Heap</button>
</div>
</div>
</nav>
</header>

<section>
<div id="Info_Cont1">
<h3>TIME COMPLEXITY</h3>
<div class="Complexity_Containers" id="Time_Complexity_Types_Container">
<div class="Pair_Definitions">
<p class="Sub_Heading">Worst case:</p>
<p id="Time_Worst"></p>
</div>
<div class="Pair_Definitions">
<p class="Sub_Heading">Average case:</p>
<p id="Time_Average"></p>
</div>
<div class="Pair_Definitions">
<p class="Sub_Heading">Best case:</p>
<p id="Time_Best"></p>
</div>
</div>
</div>

<div id="array_container"></div>

<div id="Info_Cont2">
<h3>SPACE COMPLEXITY</h3>
<div
class="Complexity_Containers"
id="Space_Complexity_Types_Container"
>
<div class="Pair_Definitions">
<p class="Sub_Heading">Worst case:</p>
<p id="Space_Worst"></p>
</div>
</div>
</div>
</section>

<script src="./scripts/main.js"></script>
<!-- This should be at the end of body and should be loaded before sorts.js -->
<script src="./scripts/visualizations.js"></script>
<!-- This should be loaded after main.js -->
<script src="./scripts/bubble_sort.js"></script>
<script src="./scripts/selection_sort.js"></script>
<script src="./scripts/insertion_sort.js"></script>
<script src="./scripts/merge_sort.js"></script>
<script src="./scripts/quick_sort.js"></script>
<script src="./scripts/heap_sort.js"></script>
</body>
</html>
161 changes: 161 additions & 0 deletions style.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions style.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit ea0d005

Please sign in to comment.