Skip to content

Commit a6391f2

Browse files
kanavphullkanavphull
committed
Initial commit
0 parents  commit a6391f2

11 files changed

+1246
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎LICENSE

+674
Large diffs are not rendered by default.

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Visualizer for Sorting Algorithmss
2+
### This is Visualizer for normal sorting algorithms built using HTML, CSS, JS and Bootstrap <br/>
3+
### The following sorts are visualized:
4+
- Bubble Sort
5+
- Selection Sort
6+
- Insertion Sort
7+
- Quick Sort
8+
- Merge Sort
9+
10+
11+
[Link to the Website]()

‎index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Visualizer for Sorting Algorithms</title>
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<header>
13+
<nav style="background-color: #42C2FF; font-weight: bold;" class=" navbar-brand navbar-expand-lg" align="center" >Visualizer for Sorting Algorithms</nav>
14+
<nav>
15+
<div class="row navbar navbar-expand-lg navbar-dark" style="background-color: #85F4FF;">
16+
17+
<div class=" navbar-brand nav-link col gap-2 d-sm-flex" id="newArray">
18+
<button type="button" class="btn btn-toolbar btn-outline-success btn-light btn-group btn-sm newArray">New Array</button>
19+
</div>
20+
21+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
<div class="collapse navbar-collapse col gap-2 ms-auto justify-content-end" id="navbarNav">
25+
26+
<button type="button" class="btn btn-outline-info btn-light btn-sm insertionSort" style="color: black;">Insertion Sort</button>
27+
<button type="button" class="btn btn-outline-info btn-light btn-sm selectionSort" style="color: black;">Selection Sort</button>
28+
<button type="button" class="btn btn-outline-info btn-light btn-sm bubbleSort" style="color: black;">Bubble Sort</button>
29+
<button type="button" class="btn btn-outline-info btn-light btn-sm quickSort" style="color: black;">Quick Sort</button>
30+
<button type="button" class="btn btn-outline-info btn-light btn-sm mergeSort" style="color: black;">Merge Sort</button>
31+
</div>
32+
33+
<div class="col" id="input" >
34+
<span id="size" style="font-size: 20px; font-weight: bold; margin-left: 100px;">Size
35+
<input id="arr_sz" type="range" min="5" max="100" step=1 value=60>
36+
</span>
37+
<span id="speed" style="font-size: 20px; font-weight: bold; margin-right: 50px;">Speed
38+
<input id="speed_input" type="range" min="20" max="300" stepDown=10 value=60>
39+
</span>
40+
</div>
41+
42+
</div>
43+
</nav>
44+
</div>
45+
</header>
46+
47+
<body class="bottom text-white">
48+
49+
<div id="bars" class="flex-container bg-gradient border-2" style="background-color: #B8FFF9;"></div>
50+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
51+
<script src="js_files/sorting.js"></script>
52+
<script src="js_files/bubble.js"></script>
53+
<script src="js_files/insertion.js"></script>
54+
<script src="js_files/merge.js"></script>
55+
<script src="js_files/quick.js"></script>
56+
<script src="js_files/selection.js"></script>
57+
</body>
58+
59+
</html>

‎js_files/bubble.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
async function bubble() {
2+
console.log('In bubbe()');
3+
const ele = document.querySelectorAll(".bar"); //array of bar elements
4+
for(let i = 0; i < ele.length-1; i++){ //for iterarating thorugh ele as iterating over number
5+
console.log(`In ${i} loop`);
6+
for(let j = 0; j < ele.length-i-1; j++){
7+
console.log(`In ${j} loop`);
8+
ele[j].style.background = 'blue';
9+
ele[j+1].style.background = 'blue';
10+
if(parseInt(ele[j].style.height) > parseInt(ele[j+1].style.height)){
11+
console.log('In if condition');
12+
await waitforme(delay);
13+
swap(ele[j], ele[j+1]);//position change here we are only swapping the size the bars are at same place only there dimension changes (not a normal swap )
14+
}
15+
ele[j].style.background = 'cyan';//temporary sorted bubbled out
16+
ele[j+1].style.background = 'cyan';//temporary sorted bubbled out
17+
}
18+
ele[ele.length-1-i].style.background = 'green';//final when that element is fixed
19+
}
20+
ele[0].style.background = 'green';//explicitly covers first element
21+
}
22+
23+
const bubSortbtn = document.querySelector(".bubbleSort");
24+
bubSortbtn.addEventListener('click', async function(){
25+
disableSortingBtn();
26+
disableSizeSlider();
27+
disableNewArrayBtn();
28+
await bubble();
29+
enableSortingBtn();
30+
enableSizeSlider();
31+
enableNewArrayBtn();
32+
});

‎js_files/insertion.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
async function insertion(){
2+
console.log('In insertion()');
3+
const ele = document.querySelectorAll(".bar");
4+
// color
5+
ele[0].style.background = 'green';
6+
for(let i = 1; i < ele.length; i++){
7+
console.log('In ith loop');
8+
let j = i - 1;
9+
let key = ele[i].style.height;
10+
// color
11+
ele[i].style.background = 'blue';
12+
13+
await waitforme(delay);
14+
15+
while(j >= 0 && (parseInt(ele[j].style.height) > parseInt(key))){
16+
console.log('In while loop');
17+
// color
18+
ele[j].style.background = 'blue';
19+
ele[j + 1].style.height = ele[j].style.height;
20+
j--;
21+
22+
await waitforme(delay);
23+
24+
// color
25+
for(let k = i; k >= 0; k--){
26+
ele[k].style.background = 'green';
27+
}
28+
}
29+
ele[j + 1].style.height = key;
30+
// color
31+
ele[i].style.background = 'green';
32+
}
33+
}
34+
35+
const inSortbtn = document.querySelector(".insertionSort");
36+
inSortbtn.addEventListener('click', async function(){
37+
disableSortingBtn();
38+
disableSizeSlider();
39+
disableNewArrayBtn();
40+
await insertion();
41+
enableSortingBtn();
42+
enableSizeSlider();
43+
enableNewArrayBtn();
44+
});
45+
46+

‎js_files/merge.js

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
//let delay = 30;
2+
async function merge(ele, low, mid, high){
3+
console.log('In merge()');
4+
console.log(`low=${low}, mid=${mid}, high=${high}`);
5+
const n1 = mid - low + 1;
6+
const n2 = high - mid;
7+
console.log(`n1=${n1}, n2=${n2}`);
8+
let left = new Array(n1);
9+
let right = new Array(n2);
10+
11+
for(let i = 0; i < n1; i++){
12+
await waitforme(delay);
13+
console.log('In merge left loop');
14+
console.log(ele[low + i].style.height + ' at ' + (low+i));
15+
// color
16+
ele[low + i].style.background = 'orange';
17+
left[i] = ele[low + i].style.height;
18+
}
19+
for(let i = 0; i < n2; i++){
20+
await waitforme(delay);
21+
console.log('In merge right loop');
22+
console.log(ele[mid + 1 + i].style.height + ' at ' + (mid+1+i));
23+
// color
24+
ele[mid + 1 + i].style.background = 'yellow';
25+
right[i] = ele[mid + 1 + i].style.height;
26+
}
27+
await waitforme(delay);
28+
let i = 0, j = 0, k = low;
29+
while(i < n1 && j < n2){
30+
await waitforme(delay);
31+
console.log('In merge while loop');
32+
console.log(parseInt(left[i]), parseInt(right[j]));
33+
34+
// To add color for which two r being compared for merging
35+
36+
if(parseInt(left[i]) <= parseInt(right[j])){
37+
console.log('In merge while loop if');
38+
// color
39+
if((n1 + n2) === ele.length){
40+
ele[k].style.background = 'green';
41+
}
42+
else{
43+
ele[k].style.background = 'lightgreen';
44+
}
45+
46+
ele[k].style.height = left[i];
47+
i++;
48+
k++;
49+
}
50+
else{
51+
console.log('In merge while loop else');
52+
// color
53+
if((n1 + n2) === ele.length){
54+
ele[k].style.background = 'green';
55+
}
56+
else{
57+
ele[k].style.background = 'lightgreen';
58+
}
59+
ele[k].style.height = right[j];
60+
j++;
61+
k++;
62+
}
63+
}
64+
while(i < n1){
65+
await waitforme(delay);
66+
console.log("In while if n1 is left");
67+
// color
68+
if((n1 + n2) === ele.length){
69+
ele[k].style.background = 'green';
70+
}
71+
else{
72+
ele[k].style.background = 'lightgreen';
73+
}
74+
ele[k].style.height = left[i];
75+
i++;
76+
k++;
77+
}
78+
while(j < n2){
79+
await waitforme(delay);
80+
console.log("In while if n2 is left");
81+
// color
82+
if((n1 + n2) === ele.length){
83+
ele[k].style.background = 'green';
84+
}
85+
else{
86+
ele[k].style.background = 'lightgreen';
87+
}
88+
ele[k].style.height = right[j];
89+
j++;
90+
k++;
91+
}
92+
}
93+
94+
async function mergeSort(ele, l, r){
95+
console.log('In mergeSort()');
96+
if(l >= r){
97+
console.log(`return cause just 1 elemment l=${l}, r=${r}`);
98+
return;
99+
}
100+
const m = l + Math.floor((r - l) / 2);
101+
console.log(`left=${l} mid=${m} right=${r}`, typeof(m));
102+
await mergeSort(ele, l, m);
103+
await mergeSort(ele, m + 1, r);
104+
await merge(ele, l, m, r);
105+
}
106+
107+
const mergeSortbtn = document.querySelector(".mergeSort");
108+
mergeSortbtn.addEventListener('click', async function(){
109+
let ele = document.querySelectorAll('.bar');
110+
let l = 0;
111+
let r = parseInt(ele.length) - 1;
112+
disableSortingBtn();
113+
disableSizeSlider();
114+
disableNewArrayBtn();
115+
await mergeSort(ele, l, r);
116+
enableSortingBtn();
117+
enableSizeSlider();
118+
enableNewArrayBtn();
119+
});
120+
121+

‎js_files/quick.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
async function partitionLomuto(ele, l, r){
3+
console.log('In partitionLomuto()');
4+
let i = l - 1;
5+
// color pivot element
6+
ele[r].style.background = 'red';
7+
for(let j = l; j <= r - 1; j++){
8+
console.log('In partitionLomuto for j');
9+
// color current element
10+
ele[j].style.background = 'yellow';
11+
// pauseChamp
12+
await waitforme(delay);
13+
14+
if(parseInt(ele[j].style.height) < parseInt(ele[r].style.height)){
15+
console.log('In partitionLomuto for j if');
16+
i++;
17+
swap(ele[i], ele[j]);
18+
// color
19+
ele[i].style.background = 'orange';
20+
if(i != j) ele[j].style.background = 'orange';
21+
// pauseChamp
22+
await waitforme(delay);
23+
}
24+
else{
25+
// color if not less than pivot
26+
ele[j].style.background = 'pink';
27+
}
28+
}
29+
i++;
30+
// pauseChamp
31+
await waitforme(delay);
32+
swap(ele[i], ele[r]); // pivot height one
33+
console.log(`i = ${i}`, typeof(i));
34+
// color
35+
ele[r].style.background = 'pink';
36+
ele[i].style.background = 'green';
37+
38+
// pauseChamp
39+
await waitforme(delay);
40+
41+
// color
42+
for(let k = 0; k < ele.length; k++){
43+
if(ele[k].style.background != 'green')
44+
ele[k].style.background = 'cyan';
45+
}
46+
47+
return i;
48+
}
49+
50+
async function quickSort(ele, l, r){
51+
console.log('In quickSort()', `l=${l} r=${r}`, typeof(l), typeof(r));
52+
if(l < r){
53+
let pivot_index = await partitionLomuto(ele, l, r);
54+
await quickSort(ele, l, pivot_index - 1);
55+
await quickSort(ele, pivot_index + 1, r);
56+
}
57+
else{
58+
if(l >= 0 && r >= 0 && l <ele.length && r <ele.length){
59+
ele[r].style.background = 'green';
60+
ele[l].style.background = 'green';
61+
}
62+
}
63+
}
64+
65+
66+
const quickSortbtn = document.querySelector(".quickSort");
67+
quickSortbtn.addEventListener('click', async function(){
68+
let ele = document.querySelectorAll('.bar');
69+
let l = 0;
70+
let r = ele.length - 1;
71+
disableSortingBtn();
72+
disableSizeSlider();
73+
disableNewArrayBtn();
74+
await quickSort(ele, l, r);
75+
enableSortingBtn();
76+
enableSizeSlider();
77+
enableNewArrayBtn();
78+
});

0 commit comments

Comments
 (0)