Skip to content

Commit a55a119

Browse files
ananya8606priyankarpal
ananya8606
and
priyankarpal
authored
Added Selection Sort Visualizer Project in plays folder (#1563)
* Create README.md Signed-off-by: ANANYA GUPTA <[email protected]> * Create SelectionSortVisualizer.js Signed-off-by: ANANYA GUPTA <[email protected]> * Create App.js Signed-off-by: ANANYA GUPTA <[email protected]> * Create select.css Signed-off-by: ANANYA GUPTA <[email protected]> * Update select.css Signed-off-by: ANANYA GUPTA <[email protected]> * Update SelectionSortVisualizer.js Signed-off-by: ANANYA GUPTA <[email protected]> --------- Signed-off-by: ANANYA GUPTA <[email protected]> Co-authored-by: Priyankar Pal <[email protected]>
1 parent 4f1b269 commit a55a119

File tree

4 files changed

+225
-0
lines changed

4 files changed

+225
-0
lines changed

‎src/plays/Selection-Sort-Visualizer/App.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import './App.css';
3+
import SelectionSortVisualizer from './SelectionSortVisualizer';
4+
5+
function App() {
6+
return (
7+
<div className="App">
8+
<SelectionSortVisualizer />
9+
</div>
10+
);
11+
}
12+
13+
export default App;

‎src/plays/Selection-Sort-Visualizer/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Selection Sort Visualizer
2+
3+
A simple React application that visualizes the Selection Sort algorithm step by step. Users can input values, and the application will display the sorting process dynamically.
4+
5+
## Features
6+
7+
- **Add values**: Allows users to input numbers to be sorted.
8+
- **Visualize sorting**: Shows the step-by-step process of the Selection Sort algorithm.
9+
- **Reset**: Clears the current input and visualizer for a fresh start.
10+
11+
## Tech Stack
12+
13+
- React
14+
- JavaScript
15+
- HTML/CSS
16+
17+
## Getting Started
18+
19+
### Prerequisites
20+
21+
Make sure you have Node.js and npm (or yarn) installed. You can download Node.js [here](https://nodejs.org/).

‎src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, { useState } from 'react';
2+
import './select.css';
3+
4+
function SelectionSortVisualizer() {
5+
const [arr, setArr] = useState([]);
6+
const [inputValue, setInputValue] = useState('');
7+
8+
const handleAdd = () => {
9+
if (inputValue === '') return;
10+
const newValue = Number(inputValue);
11+
setArr([...arr, newValue]);
12+
setInputValue('');
13+
};
14+
15+
const handleReset = () => {
16+
setArr([]);
17+
};
18+
19+
const sleep = (ms) => {
20+
return new Promise((resolve) => setTimeout(resolve, ms));
21+
};
22+
23+
const handleSort = async () => {
24+
const arrCopy = [...arr];
25+
const outputElements = document.getElementById('output-visualizer');
26+
outputElements.innerHTML = '';
27+
28+
for (let i = 0; i < arrCopy.length - 1; i++) {
29+
let min = i;
30+
for (let j = i + 1; j < arrCopy.length; j++) {
31+
if (arrCopy[j] < arrCopy[min]) {
32+
min = j;
33+
}
34+
}
35+
36+
await sleep(1000);
37+
38+
const div = document.createElement('div');
39+
for (let j = 0; j < arrCopy.length; j++) {
40+
const node = document.createElement('span');
41+
const textnode = document.createTextNode(arrCopy[j]);
42+
node.appendChild(textnode);
43+
if (j < i) node.style.backgroundColor = '#40c896';
44+
if (j === min || j === i) node.style.backgroundColor = '#e6852c';
45+
div.appendChild(node);
46+
}
47+
outputElements.appendChild(div);
48+
49+
if (min !== i) {
50+
[arrCopy[min], arrCopy[i]] = [arrCopy[i], arrCopy[min]];
51+
}
52+
53+
await sleep(1000);
54+
55+
const newDiv = document.createElement('div');
56+
for (let j = 0; j < arrCopy.length; j++) {
57+
const node = document.createElement('span');
58+
const textnode = document.createTextNode(arrCopy[j]);
59+
node.appendChild(textnode);
60+
if (j <= i || (i === arrCopy.length - 2 && j === arrCopy.length - 1)) {
61+
node.style.backgroundColor = '#40c896';
62+
}
63+
newDiv.appendChild(node);
64+
}
65+
outputElements.replaceChild(newDiv, div);
66+
}
67+
68+
setArr(arrCopy);
69+
};
70+
71+
return (
72+
<div className="visualizer-body">
73+
<section className="visualizer-head">Selection Sort</section>
74+
<div id="input-visualizer">
75+
{arr.map((value, index) => (
76+
<div key={index}>{value}</div>
77+
))}
78+
</div>
79+
<div className="visualizer-input-container">
80+
<input
81+
type="number"
82+
className="input-field"
83+
value={inputValue}
84+
onChange={(e) => setInputValue(e.target.value)}
85+
/>
86+
<button className="button-green" onClick={handleAdd}>Add</button>
87+
<button className="button-blue" onClick={handleSort}>Sort</button>
88+
<button className="button-blue" onClick={handleReset}>Reset</button>
89+
</div>
90+
<div id="output-visualizer"></div>
91+
</div>
92+
);
93+
}
94+
95+
export default SelectionSortVisualizer;

‎src/plays/Selection-Sort-Visualizer/select.css

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Scoped styles for the Selection Sort Visualizer */
2+
.visualizer-body {
3+
background-color: papayawhip;
4+
}
5+
6+
.visualizer-container * {
7+
font-size: 16px;
8+
font-weight: bold;
9+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
10+
}
11+
12+
.visualizer-head {
13+
margin-top: 20px;
14+
margin-right: 20vw;
15+
margin-left: 20vw;
16+
text-align: center;
17+
font-size: 30px;
18+
background-color: greenyellow;
19+
color: white;
20+
border-radius: 19px;
21+
font-weight: bolder;
22+
}
23+
24+
.visualizer-input-container {
25+
display: flex;
26+
flex-direction: row;
27+
margin: 2rem 5rem;
28+
}
29+
30+
.input-field {
31+
width: 180px;
32+
height: 40px;
33+
border: 1px solid black;
34+
border-radius: 5px;
35+
outline: none;
36+
text-align: center;
37+
}
38+
39+
.button-blue,
40+
.button-green {
41+
width: 100px;
42+
text-align: center;
43+
margin-left: 10px;
44+
border: 1px solid black;
45+
border-radius: 5px;
46+
height: 40px;
47+
color: white;
48+
}
49+
50+
.button-green {
51+
background-color: #4cd430;
52+
}
53+
54+
.button-blue {
55+
background-color: #3478d5;
56+
}
57+
58+
#input-visualizer {
59+
margin: 0 5rem;
60+
margin-top: 2rem;
61+
display: flex;
62+
text-align: center;
63+
}
64+
65+
#input-visualizer div {
66+
margin-right: 10px;
67+
background-color: #e6852c;
68+
border: 1px solid black;
69+
border-radius: 5px;
70+
padding: 10px;
71+
width: 50px;
72+
color: white;
73+
}
74+
75+
#output-visualizer {
76+
display: flex;
77+
flex-direction: column;
78+
}
79+
80+
#output-visualizer div {
81+
margin: 0 5rem;
82+
margin-top: 2rem;
83+
display: flex;
84+
text-align: center;
85+
}
86+
87+
#output-visualizer div span {
88+
margin-right: 10px;
89+
background-color: #3478d5;
90+
border: 1px solid black;
91+
border-radius: 5px;
92+
padding: 10px;
93+
width: 50px;
94+
color: white;
95+
}
96+

0 commit comments

Comments
 (0)