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]>
reactplay · Oct 25, 2024 · a55a119 · a55a119
1 parent 4f1b269
commit a55a119
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 0 deletions.
diff --git a/src/plays/Selection-Sort-Visualizer/App.js b/src/plays/Selection-Sort-Visualizer/App.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.css';
+import SelectionSortVisualizer from './SelectionSortVisualizer';
+
+function App() {
+  return (
+    <div className="App">
+      <SelectionSortVisualizer />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/plays/Selection-Sort-Visualizer/README.md b/src/plays/Selection-Sort-Visualizer/README.md
@@ -0,0 +1,21 @@
+# Selection Sort Visualizer
+
+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.
+
+## Features
+
+- **Add values**: Allows users to input numbers to be sorted.
+- **Visualize sorting**: Shows the step-by-step process of the Selection Sort algorithm.
+- **Reset**: Clears the current input and visualizer for a fresh start.
+
+## Tech Stack
+
+- React
+- JavaScript
+- HTML/CSS
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have Node.js and npm (or yarn) installed. You can download Node.js [here](https://nodejs.org/).
diff --git a/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js b/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import './select.css';
+
+function SelectionSortVisualizer() {
+  const [arr, setArr] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleAdd = () => {
+    if (inputValue === '') return;
+    const newValue = Number(inputValue);
+    setArr([...arr, newValue]);
+    setInputValue('');
+  };
+
+  const handleReset = () => {
+    setArr([]);
+  };
+
+  const sleep = (ms) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  const handleSort = async () => {
+    const arrCopy = [...arr];
+    const outputElements = document.getElementById('output-visualizer');
+    outputElements.innerHTML = '';
+
+    for (let i = 0; i < arrCopy.length - 1; i++) {
+      let min = i;
+      for (let j = i + 1; j < arrCopy.length; j++) {
+        if (arrCopy[j] < arrCopy[min]) {
+          min = j;
+        }
+      }
+
+      await sleep(1000);
+
+      const div = document.createElement('div');
+      for (let j = 0; j < arrCopy.length; j++) {
+        const node = document.createElement('span');
+        const textnode = document.createTextNode(arrCopy[j]);
+        node.appendChild(textnode);
+        if (j < i) node.style.backgroundColor = '#40c896';
+        if (j === min || j === i) node.style.backgroundColor = '#e6852c';
+        div.appendChild(node);
+      }
+      outputElements.appendChild(div);
+
+      if (min !== i) {
+        [arrCopy[min], arrCopy[i]] = [arrCopy[i], arrCopy[min]];
+      }
+
+      await sleep(1000);
+
+      const newDiv = document.createElement('div');
+      for (let j = 0; j < arrCopy.length; j++) {
+        const node = document.createElement('span');
+        const textnode = document.createTextNode(arrCopy[j]);
+        node.appendChild(textnode);
+        if (j <= i || (i === arrCopy.length - 2 && j === arrCopy.length - 1)) {
+          node.style.backgroundColor = '#40c896';
+        }
+        newDiv.appendChild(node);
+      }
+      outputElements.replaceChild(newDiv, div);
+    }
+
+    setArr(arrCopy);
+  };
+
+  return (
+    <div className="visualizer-body">
+      <section className="visualizer-head">Selection Sort</section>
+      <div id="input-visualizer">
+        {arr.map((value, index) => (
+          <div key={index}>{value}</div>
+        ))}
+      </div>
+      <div className="visualizer-input-container">
+        <input
+          type="number"
+          className="input-field"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+        />
+        <button className="button-green" onClick={handleAdd}>Add</button>
+        <button className="button-blue" onClick={handleSort}>Sort</button>
+        <button className="button-blue" onClick={handleReset}>Reset</button>
+      </div>
+      <div id="output-visualizer"></div>
+    </div>
+  );
+}
+
+export default SelectionSortVisualizer;
diff --git a/src/plays/Selection-Sort-Visualizer/select.css b/src/plays/Selection-Sort-Visualizer/select.css
@@ -0,0 +1,96 @@
+/* Scoped styles for the Selection Sort Visualizer */
+.visualizer-body {
+    background-color: papayawhip;
+  }
+
+  .visualizer-container * {
+    font-size: 16px;
+    font-weight: bold;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  }
+
+  .visualizer-head {
+    margin-top: 20px;
+    margin-right: 20vw;
+    margin-left: 20vw;
+    text-align: center;
+    font-size: 30px;
+    background-color: greenyellow;
+    color: white;
+    border-radius: 19px;
+    font-weight: bolder;
+  }
+
+  .visualizer-input-container {
+    display: flex;
+    flex-direction: row;
+    margin: 2rem 5rem;
+  }
+
+  .input-field {
+    width: 180px;
+    height: 40px;
+    border: 1px solid black;
+    border-radius: 5px;
+    outline: none;
+    text-align: center;
+  }
+
+  .button-blue,
+  .button-green {
+    width: 100px;
+    text-align: center;
+    margin-left: 10px;
+    border: 1px solid black;
+    border-radius: 5px;
+    height: 40px;
+    color: white;
+  }
+
+  .button-green {
+    background-color: #4cd430;
+  }
+
+  .button-blue {
+    background-color: #3478d5;
+  }
+
+  #input-visualizer {
+    margin: 0 5rem;
+    margin-top: 2rem;
+    display: flex;
+    text-align: center;
+  }
+
+  #input-visualizer div {
+    margin-right: 10px;
+    background-color: #e6852c;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 10px;
+    width: 50px;
+    color: white;
+  }
+
+  #output-visualizer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #output-visualizer div {
+    margin: 0 5rem;
+    margin-top: 2rem;
+    display: flex;
+    text-align: center;
+  }
+
+  #output-visualizer div span {
+    margin-right: 10px;
+    background-color: #3478d5;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding: 10px;
+    width: 50px;
+    color: white;
+  }
+