Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@anurag26311
anurag26311 committed Oct 7, 2024
0 parents commit 0ca0b11
Show file tree
Hide file tree
Showing 14 changed files with 1,121 additions and 0 deletions.
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# 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.

Take a look at live version:
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": {}
}
230 changes: 230 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@

* {
margin: 0px;
padding: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: large;
font-weight: bold;
text-transform: uppercase;
}

nav {
background-color: #3b3a3a;
color: white;
display: -ms-grid;
display: grid;
-ms-grid-columns: 30% 60%;
grid-template-columns: 30% 60%;
-webkit-column-gap: 10%;
column-gap: 10%;
padding: 0% 5%;
}

nav .array-inputs {
display: -ms-grid;
display: grid;
-ms-grid-columns: 60% 40%;
grid-template-columns: 60% 40%;
place-content: center;
padding: 5% 0%;
}

nav .array-inputs #a_size {
padding: 5% 0%;
}

nav .array-inputs #a_speed {
padding: 5% 0%;
}

nav .array-inputs #a_generate {
background-color: transparent;
border: none;
outline: none;
color: white;
padding: 4% 0% 0% 0%;
padding-left: 20%;
}

nav .array-inputs #a_generate:hover {
cursor: pointer;
}

nav .header_right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

nav .header_right .nav-heading {
display: inline-block;
font-size: xxx-large;
padding: 3% 0%;
}

nav .header_right .algos{
display: grid;
grid-template-columns: repeat(6, 1fr);
justify-content: center;
padding: 2% 0%;

}

nav .header_right .algos button {
background-color: transparent;
border: none;
color: white;
outline: none;
padding: 5% 0%;
font-size: x-large;
}

nav .header_right .algos button:hover {
background-color: blue;
cursor: pointer;
}

nav .header_right .algos .butt_locked {
background-color: transparent;
cursor: pointer;
}

nav .header_right .algos .butt_locked:hover {
background-color: transparent;
cursor: pointer;
}

nav .header_right .algos .butt_selected {
background-color: white;
color: green;
}

nav .header_right .algos .butt_selected:hover {
background-color: white;
cursor: pointer;
}

nav .header_right .algos .butt_unselected:hover {
background-color: blue;
cursor: pointer;
}

section {
display: -ms-grid;
display: grid;
-ms-grid-columns: 20% 60% 20%;
grid-template-columns: 20% 60% 20%;
}

section .Complexity_Containers {
margin-top: 20%;
}

section .Complexity_Containers .Pair_Definitions {
margin-top: 20%;
}

section .Complexity_Containers .Pair_Definitions p {
display: inline;
}

section .Complexity_Containers .Pair_Definitions p.Sub_Heading {
font-size: medium;
text-transform: none;
}

section #Info_Cont1 {
padding: 20% 10%;
}

section #Info_Cont1 h3 {
text-decoration: underline;
}

section #array_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 70vh;
}

section #Info_Cont2 {
padding: 20% 10%;
}

section #Info_Cont2 h3 {
text-decoration: underline;
}

.hide {
display: none;
}


@media (max-width: 480px)
{
nav {
grid-template-columns: 100%;
text-align: center;
}

nav .header_right .nav-heading {
font-size: xx-large;
}

nav .header_right .algos {
grid-template-columns: 100%;
}

section {
grid-template-columns: 100%;
padding: 10%;
}

#array_container {
height: 50vh;
}
}

@media (min-width: 481px) and (max-width: 1250px)
{
nav {
grid-template-columns: 40% 60%;
font-size: medium;
}

nav .header_right .nav-heading {
font-size: x-large;
}

section {
grid-template-columns: 10% 80% 10%;
}

#array_container {
height: 60vh;
}
}

@media (min-width: 1251px)
{
nav {
grid-template-columns: 30% 60%;
font-size: large;
}

section {
grid-template-columns: 20% 60% 20%;
}

#array_container {
height: 70vh;
}
}


9 changes: 9 additions & 0 deletions css/style.css.map

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

106 changes: 106 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!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 >Bubble</button>
<button >Selection</button>
<button >Insertion</button>
<button >Merge</button>
<button >Quick</button>
<button style="margin-right: 0px;">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>

<footer>

</footer>

<script src="./scripts/main.js"></script>
<script src="./scripts/visualizations.js"></script>

<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>
Loading

0 comments on commit 0ca0b11

Please sign in to comment.