Merge pull request #417 from ananya8606/master

Added Selection Sort Visualizer project inside Projects/WebDevelopment/JavaScriptProjects/Others folder
AkashSingh3031 · Oct 21, 2024 · db8ea56 · db8ea56
2 parents 180190f + 4123799
commit db8ea56
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 0 deletions.
diff --git a/...Development/JavaScript Projects/Others/27). Selection Sort Visualizer/README.md b/...Development/JavaScript Projects/Others/27). Selection Sort Visualizer/README.md
@@ -0,0 +1,6 @@
+# Selection-Sort-Visualizer
+
+
+
+https://user-images.githubusercontent.com/52853286/208376155-4ab58ea9-5139-45d8-b92a-f65835f0598f.mp4
+
diff --git a/...ects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.css b/...ects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.css
@@ -0,0 +1,85 @@
+body {
+    background-color:papayawhip;
+  }
+  *{
+    font-size: 16px;
+    font-weight: bold !important;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  }
+  .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;
+}
+  .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;
+  }
diff --git a/...cts/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.html b/...cts/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Selection Sort Visualizer</title>
+    <link rel="stylesheet" href="select.css" />
+  </head>
+  <body>
+    <section class="head">Selection Sort</section>
+    <div id="input-visualizer"></div>
+    <div class="container">
+      <input type="number" class="input-field" name="value" id="input-value" />
+      <button class="button-green" onclick="handleAdd()">Add</button>
+      <button class="button-blue" onclick="handleSort()">Sort</button>
+      <button class="button-blue" onclick="handleReset()">Reset</button>
+    </div>
+    <div id="output-visualizer"></div>
+    <script src="select.js"></script>
+  </body>
+</html>
diff --git a/...jects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.js b/...jects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.js
@@ -0,0 +1,67 @@
+const input = document.getElementById('input-value');
+const inputVisualizer = document.getElementById('input-visualizer');
+const outputVisualizer = document.getElementById('output-visualizer');
+let arr = [];
+
+function handleAdd() {
+  const value = input.value;
+  const node = document.createElement('div');
+  const textnode = document.createTextNode(value);
+  node.appendChild(textnode);
+  inputVisualizer.appendChild(node);
+  arr.push(Number(value));
+}
+
+function handleReset() {
+  inputVisualizer.innerHTML = '';
+  outputVisualizer.innerHTML = '';
+  arr = [];
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function handleSort() {
+  outputVisualizer.innerHTML = '';
+  for (let i = 0; i < arr.length - 1; i++) {
+    let min = i;
+    for (let j = i + 1; j < arr.length; j++) {
+      if (arr[j] < arr[min]) {
+        min = j;
+      }
+    }
+
+    await sleep(1000);
+
+    const div = document.createElement('div');
+    for (let j = 0; j < arr.length; j++) {
+      const node = document.createElement('span');
+      const textnode = document.createTextNode(arr[j]);
+      node.appendChild(textnode);
+      if (j < i) node.style.backgroundColor = '#40c896';
+      if (j === min || j === i) node.style.backgroundColor = '#e6852c';
+      div.appendChild(node);
+    }
+    outputVisualizer.appendChild(div);
+
+    if (min !== i) {
+      let temp = arr[min];
+      arr[min] = arr[i];
+      arr[i] = temp;
+    }
+
+    await sleep(1000);
+
+    const newdiv = document.createElement('div');
+    for (let j = 0; j < arr.length; j++) {
+      const node = document.createElement('span');
+      const textnode = document.createTextNode(arr[j]);
+      node.appendChild(textnode);
+      if (j <= i || (i === arr.length - 2 && j === arr.length - 1))
+        node.style.backgroundColor = '#40c896';
+      newdiv.appendChild(node);
+    }
+    outputVisualizer.replaceChild(newdiv, div);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,6 @@
		# Selection-Sort-Visualizer



		https://user-images.githubusercontent.com/52853286/208376155-4ab58ea9-5139-45d8-b92a-f65835f0598f.mp4