Added Selection Sort Visualizer Project in plays folder

[ananya8606]

Selection Sort Visualizer

A Selection Sort Visualizer implemented using React. The visualizer allows users to input a series of numbers and watch the step-by-step process of the Selection Sort algorithm as it sorts the array. The interface includes options to add values, sort the array, and reset the visualizer.

Features

• Interactive Controls: Users can add values to the input, trigger the sorting process, and reset the visualizer.
• Step-by-Step Visualization: The sorting process is displayed step by step with visual indicators showing the comparisons and swaps.
• Color-Coded Cues: Elements being compared are highlighted to make the sorting process easier to follow.

Type of change

New feature (non-breaking change which adds functionality)

Summary of Changes

• Added a new React component-based structure for visualizing Selection Sort.
• Included interactive controls to input values, trigger the sorting process, and reset the visualizer.
• Updated styling to provide visual cues during the sorting process, with color indicators for comparisons and sorted elements.

Usage

• Add Values: Use the input field to add numbers, which will appear in the input visualizer.
• Sort: Click the "Sort" button to start the Selection Sort visualization.
• Reset: Use the "Reset" button to clear the current state and input a new set of values.

How It Works

The visualizer performs the Selection Sort algorithm in the following steps:

1. It iterates through the array, finding the minimum element from the unsorted part.
2. It swaps the minimum element with the first unsorted element.
3. The sorted portion is incremented, and the algorithm continues until the entire array is sorted.

During the sorting process:

• Elements being compared are highlighted.
• Sorted elements are displayed in a different color.

Dependencies

No new dependencies were added for this feature.

Testing

The testing has been done locally.
The following tests were performed to verify functionality:

1. Manual Testing:

   • Added various values to ensure they are displayed in the input visualizer.
   • Tested the sorting process to confirm the algorithm works as expected, with correct delays and color changes.
   • Used the reset button to ensure the visualizer cleared as expected.

2. Cross-Browser Testing:

   • Verified functionality on multiple browsers, including Chrome, Firefox, and Edge.

To Reproduce the Tests

1. Run the application using npm start.
2. Add multiple numbers using the input field.
3. Click "Sort" to observe the sorting process.
4. Use "Reset" to clear the visualizer.

Checklist

• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.

Screenshot of Working Demo

[netlify]

👷 Deploy request for reactplayio pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	e4c536e

[github-actions]

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

can you link the issue number here? @ananya8606