Skip to content

Commit

Permalink
Update App.jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajanjha9235
rajanjha9235 authored Dec 23, 2024
1 parent 8a9b888 commit 02ac700
Showing 1 changed file with 86 additions and 84 deletions.
170 changes: 86 additions & 84 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,121 +76,123 @@ function App() {


return (
<div className="container mx-auto px-4 py-8" >

<h1 className="text-4xl font-bold text-center mb-8 ">
Sorting Visualizer
</h1>

<div className="flex flex-wrap justify-center gap-4 mb-2">
<>
<div className="container mx-auto px-4 py-8" >

<h1 className="text-4xl font-bold text-center mb-8 ">
Sorting Visualizer
</h1>

<div className="flex flex-wrap justify-center gap-4 mb-2">

<select
className="px-4 py-2 border rounded-md"
value={algortihm}
onChange={(e) => setAlgorithm(e.target.value)}
disabled={sorting}
>

<select
className="px-4 py-2 border rounded-md"
value={algortihm}
onChange={(e) => setAlgorithm(e.target.value)}
disabled={sorting}
>
<option value="bubbleSort">Bubble Sort</option>

<option value="bubbleSort">Bubble Sort</option>
<option value="mergeSort">Merge Sort</option>

<option value="insertionSort">Insertion Sort</option>

<option value="quickSort">Quick Sort</option>

<option value="mergeSort">Merge Sort</option>

<option value="insertionSort">Insertion Sort</option>

<option value="quickSort">Quick Sort</option>
<option value="heapSort">Heap Sort</option>

<option value="heapSort">Heap Sort</option>
<option value="selectionSort">Selection Sort</option>

<option value="selectionSort">Selection Sort</option>
</select>

</select>

<button
className={`px-4 py-2 rounded-md ${sorting ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white"} `}
onClick={handleSort}
disabled={sorting}
>
{sorting ? "Sorting..." : "Sort"}
</button>

<button
className={`px-4 py-2 rounded-md ${sorting ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white"} `}
onClick={handleSort}
disabled={sorting}
>
{sorting ? "Sorting..." : "Sort"}
</button>

<button
className={`px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md ${sorting ? "cursor-not-allowed" : ""}`}
onClick={handleReset}
disabled={sorting}
>
Reset
</button>

<button
className={`px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md ${sorting ? "cursor-not-allowed" : ""}`}
onClick={handleReset}
disabled={sorting}
>
Reset
</button>
</div>

</div>

<div className="flex flex-wrap justify-center gap-4 mb-10"> {/* It has Size and speed control */}

<div className="flex flex-wrap justify-center gap-4 mb-10"> {/* It has Size and speed control */}
<div className="flex items-center"> {/* For the Size Control control */}

<label htmlFor="arraySize" className="mr-2">
Array Size :
</label>

<div className="flex items-center"> {/* For the Size Control control */}

<label htmlFor="arraySize" className="mr-2">
Array Size :
</label>
<input type="range" id="arraySize"
min="10" max="100" value={arraySize}
onChange={(e) => setArraySize(parseInt(e.target.value))}
className="w-32"
disabled={sorting}/>

<input type="range" id="arraySize"
min="10" max="100" value={arraySize}
onChange={(e) => setArraySize(parseInt(e.target.value))}
className="w-32"
disabled={sorting}/>
<span className="ml-2">{arraySize}</span>

<span className="ml-2">{arraySize}</span>
</div>

</div>

<div className="flex items-center"> {/* For Speed Control */}

<label htmlFor="speed" className="mr-2">
Speed :
</label>

<div className="flex items-center"> {/* For Speed Control */}

<label htmlFor="speed" className="mr-2">
Speed :
</label>
<input type="range" id="speed"
min="1" max="100" value={speed}
onChange={(e) => setSpeed(parseInt(e.target.value))}
className="w-32"
disabled={sorting}/>

<input type="range" id="speed"
min="1" max="100" value={speed}
onChange={(e) => setSpeed(parseInt(e.target.value))}
className="w-32"
disabled={sorting}/>
<span className="ml-2">{speed}</span>
</div>

<span className="ml-2">{speed}</span>
</div>

</div>


<div className="flex items-end justify-center h-64 border-b-2 border-gray-300 ">

<div className="flex items-end justify-center h-64 border-b-2 border-gray-300 ">
{array.map((value , index) => (
<div key={index}
className={`w-8 mx-px transition-all duration-200 ${completed ? "bg-green-500" : "bg-blue-500"} rounded-t-xl `}
style={{height : `${value}%`}}
>
{/* {value} */}
</div>
))}
</div>

{array.map((value , index) => (
<div key={index}
className={`w-8 mx-px transition-all duration-200 ${completed ? "bg-green-500" : "bg-blue-500"} rounded-t-xl `}
style={{height : `${value}%`}}
>
{/* {value} */}
{completed && (
<div className="text-center mt-4 text-green-500 font-bold">
Sorting Completed!
</div>
))}
</div>

{completed && (
<div className="text-center mt-4 text-green-500 font-bold">
Sorting Completed!
</div>
)}
)}

{algortihm == "bubbleSort" && <BubbleSort />}
{algortihm == "mergeSort" && <MergeSort />}
{algortihm == "insertionSort" && <InsertionSort />}
{algortihm == "quickSort" && <QuickSort />}
{algortihm == "heapSort" && <HeapSort />}
{algortihm == "selectionSort" && <SelectionSort />}
{algortihm == "bubbleSort" && <BubbleSort />}
{algortihm == "mergeSort" && <MergeSort />}
{algortihm == "insertionSort" && <InsertionSort />}
{algortihm == "quickSort" && <QuickSort />}
{algortihm == "heapSort" && <HeapSort />}
{algortihm == "selectionSort" && <SelectionSort />}

</div>
<Footer/>
</div>
</>
)
}

Expand Down

0 comments on commit 02ac700

Please sign in to comment.