Skip to content

Commit 6d9ece9

Browse files
ProgrammerShriProgrammerShri
committed
Almost Done...
1 parent d735151 commit 6d9ece9

File tree

6 files changed

+112
-86
lines changed

6 files changed

+112
-86
lines changed

‎src/Icons/github-icon-removebg-preview.png‎

47.9 KB
Loading

‎src/Icons/github-icon.png‎

90.5 KB
Loading

‎src/SortingVisualizer/SortingVisualizer.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,13 @@ label {
106106
header {
107107
background-color: inherit;
108108
color: #e7d9ea;
109-
font-size: larger;
109+
font-size: 25px;
110110
text-align: center;
111111
line-height: 2rem;
112+
font-weight: 600;
113+
border: 2px solid white;
114+
border-radius: 20px;
115+
padding: 10px;
112116
}
113117

114118
#select {
@@ -129,3 +133,8 @@ header {
129133
.slt {
130134
cursor: pointer;
131135
}
136+
137+
img {
138+
height: 40px;
139+
width: 40px;
140+
}

‎src/SortingVisualizer/Visualizer.js‎

Lines changed: 102 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, useRef } from "react";
22
import colors from "./colorCodes";
3-
import GithubIcon from "../Icons/GithubIcon";
3+
// import GithubIcon from "../Icons/GithubIcon";
44
import { mergeSortAnimation } from "../algorithms/mergesort";
55
import { insertionSort } from "../algorithms/insertion";
66
import { selectionSort } from "../algorithms/selectionsort";
@@ -10,8 +10,13 @@ import { heapsort } from "../algorithms/heapsort";
1010
// stylesheet
1111
import "./SortingVisualizer.css";
1212
// Sounds
13-
import ResetEffect from "./sounds/ResetEffect.mp3";
14-
import CompletedEffect from "./sounds/CompletedEffect.mp3";
13+
import ResetEffect from "./sounds/resetEffect.mp3";
14+
import CompletedEffect from "./sounds/completedEffect.mp3";
15+
import SortingStart from "./sounds/sortingStart.mp3";
16+
import SortingCompleted from "./sounds/sortingCompleted.mp3";
17+
// Icon
18+
19+
import githubIcon from "../Icons/github-icon.png";
1520

1621
// Random Number Genrator
1722
const generateRandomNumber = (i, j) => {
@@ -22,14 +27,20 @@ const Visualizer = () => {
2227
// state of the array
2328
const [mainArray, setMainArray] = useState([]);
2429
const [arrayLength, setArrayLength] = useState(20);
25-
const [animationSpeed, setAnimationSpeed] = useState(10);
30+
const [animationSpeed, setAnimationSpeed] = useState(100);
2631
const [algo, setAlgo] = useState("mergesort");
2732
const [able, setAble] = useState(true);
2833

34+
//Project Sounds
35+
36+
let resetEffect = new Audio(ResetEffect); // Play audio when bar reset
37+
let completedEffect = new Audio(CompletedEffect);
38+
let sortingStart = new Audio(SortingStart);
39+
let sortingCompleted = new Audio(SortingCompleted);
40+
2941
//Render the Array Before DOM loades
3042
useEffect(() => {
3143
if (able) populateArray(arrayLength);
32-
// eslint-disable-next-line react-hooks/exhaustive-deps
3344
}, [arrayLength, algo]);
3445

3546
// ABLE / DISABLE BUTTONS ETC.
@@ -49,10 +60,8 @@ const Visualizer = () => {
4960
}
5061
}, [able]);
5162

52-
let audio = new Audio(ResetEffect); // Play audio when bar reset
53-
5463
const populateArray = (size) => {
55-
audio.play(); // play resetEffect here
64+
resetEffect.play(); // play resetEffect here
5665
const tempArr = [];
5766
for (let i = 0; i < size; i++) {
5867
const item = {
@@ -68,12 +77,11 @@ const Visualizer = () => {
6877
if (able) setMainArray(tempArr);
6978
};
7079

71-
let completedAudio = new Audio(CompletedEffect);
72-
7380
// colors every elements afte sorting
7481
const colorEveryElement = (arr, counter) => {
7582
setTimeout(() => {
76-
completedAudio.play(); // Play audion when bar will sorted
83+
completedEffect.play(); // Play audion when bar will sorted
84+
sortingCompleted.play();
7785
const sortedArray = [];
7886
for (let i = 0; i < arr.length; i++) {
7987
document.getElementsByClassName("arrayBar")[i].style.backgroundColor =
@@ -135,6 +143,7 @@ const Visualizer = () => {
135143
colorEveryElement(arr, count + 1);
136144
};
137145
const startSorting = (algo) => {
146+
sortingStart.play();
138147
switch (algo) {
139148
case "bubblesort":
140149
bubbleSortAnimate();
@@ -164,84 +173,92 @@ const Visualizer = () => {
164173
};
165174

166175
return (
167-
<div className="container">
168-
<div className="visualizeContainer">
169-
{mainArray.map((item) => {
170-
return (
171-
<div
172-
className="arrayBar"
173-
style={{
174-
height: `${item.val}px`,
175-
backgroundColor: colors.primaryColor,
176-
}}
177-
key={item.idx}
176+
<>
177+
<div className="container">
178+
<div className="visualizeContainer">
179+
{mainArray.map((item) => {
180+
return (
181+
<div
182+
className="arrayBar"
183+
style={{
184+
height: `${item.val}px`,
185+
backgroundColor: colors.primaryColor,
186+
}}
187+
key={item.idx}
188+
>
189+
{arrayLength < 31 && able && <span>{item.val}</span>}
190+
</div>
191+
);
192+
})}
193+
</div>
194+
<div className="sidebar">
195+
<header>
196+
Sorting Algorithm <br /> Visualizer
197+
</header>
198+
<div className="select-box able">
199+
<label htmlFor="algo">Select Algorithm</label>
200+
201+
<select
202+
name="algo"
203+
id="select"
204+
value={algo}
205+
onChange={(e) => setAlgo(e.target.value)}
206+
className="slt"
178207
>
179-
{arrayLength < 31 && able && <span>{item.val}</span>}
180-
</div>
181-
);
182-
})}
183-
</div>
184-
<div className="sidebar">
185-
<header>
186-
Sorting Algorithm <br /> Visualizer
187-
</header>
188-
<div className="select-box able">
189-
<label htmlFor="algo">Select Algorithm</label>
190-
<label htmlFor="algo"></label>
191-
<div></div>
192-
193-
<select
194-
name="algo"
195-
id="select"
196-
value={algo}
197-
onChange={(e) => setAlgo(e.target.value)}
198-
className="slt"
208+
<option value="mergesort">Merge Sort</option>
209+
<option value="bubblesort">Bubble Sort</option>
210+
<option value="insertionsort">Insertion Sort</option>
211+
<option value="selectionsort">Selection Sort</option>
212+
<option value="quicksort">Quick Sort</option>
213+
<option value="heapsort">Heap Sort</option>
214+
</select>
215+
</div>
216+
<button className="button able" onClick={() => startSorting(algo)}>
217+
Sort
218+
</button>
219+
220+
<button
221+
onClick={() => populateArray(arrayLength)}
222+
className="new-arr-btn button able"
199223
>
200-
<option value="bubblesort">Bubble Sort</option>
201-
<option value="mergesort">Merge Sort</option>
202-
<option value="insertionsort">Insertion Sort</option>
203-
<option value="selectionsort">Selection Sort</option>
204-
<option value="quicksort">Quick Sort</option>
205-
<option value="heapsort">Heap Sort</option>
206-
</select>
207-
</div>
208-
<button className="button able" onClick={() => startSorting(algo)}>
209-
Sort
210-
</button>
211-
212-
<button
213-
onClick={() => populateArray(arrayLength)}
214-
className="new-arr-btn button able"
215-
>
216-
Random Bar
217-
</button>
218-
219-
<div className="slider-container">
220-
<label>Length of Array : {arrayLength} </label>
221-
<input
222-
className="input-range able"
223-
type="range"
224-
value={arrayLength}
225-
onChange={(e) => setArrayLength(e.target.value)}
226-
min="7"
227-
max="150"
228-
/>
229-
</div>
230-
<div className="slider-container">
231-
<label>Speed : {500 - animationSpeed}</label>
232-
<input
233-
className="input-range able"
234-
type="range"
235-
value={500 - animationSpeed}
236-
onChange={(e) => setAnimationSpeed(500 - e.target.value)}
237-
min="350"
238-
max="499"
239-
/>
240-
</div>
224+
Random Bar
225+
</button>
226+
227+
<div className="slider-container">
228+
<label>Length of Array : {arrayLength} </label>
229+
<input
230+
className="input-range able"
231+
type="range"
232+
value={arrayLength}
233+
onChange={(e) => setArrayLength(e.target.value)}
234+
min="7"
235+
max="150"
236+
/>
237+
</div>
238+
<div className="slider-container">
239+
<label>Speed : {animationSpeed}</label>
240+
<label>
241+
Fast
242+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
243+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Slow
244+
</label>
241245

242-
<GithubIcon className={"github-icon"} />
246+
<input
247+
className="input-range able"
248+
type="range"
249+
value={animationSpeed}
250+
onChange={(e) => setAnimationSpeed(e.target.value)}
251+
min="100"
252+
max="1000"
253+
/>
254+
</div>
255+
<span className="social">
256+
<img src={githubIcon} alt="githubIcon" />{" "}
257+
</span>
258+
{/* <GithubIcon className={"github-icon"} /> */}
259+
</div>
243260
</div>
244-
</div>
261+
</>
245262
);
246263
};
247264

‎src/SortingVisualizer/sounds/sortingCompleted.mp3‎

4.59 KB
Binary file not shown.

‎src/SortingVisualizer/sounds/sortingStart.mp3‎

3.94 KB
Binary file not shown.

0 commit comments

Comments
 (0)