Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Selection Sort Visualizer project inside Projects/WebDevelopment/JavaScriptProjects/Others folder #417

Merged
merged 7 commits into from
Oct 21, 2024
Merged

Added Selection Sort Visualizer project inside Projects/WebDevelopment/JavaScriptProjects/Others folder #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c0c1280
Create Readme.md
ananya8606 Oct 20, 2024
ae7b058
Delete 4]. Projects/Web Development/JavaScript Projects/Others/Select…
ananya8606 Oct 20, 2024
0c666ba
Create Readme.md
ananya8606 Oct 20, 2024
d4e0eed
Create select.html
ananya8606 Oct 20, 2024
fbdaeb2
Create select.js
ananya8606 Oct 20, 2024
5057ff7
Rename Readme.md to README.md
ananya8606 Oct 20, 2024
4123799
Create select.css
ananya8606 Oct 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions ...Development/JavaScript Projects/Others/27). Selection Sort Visualizer/README.md
View file
Open in desktop
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

85 changes: 85 additions & 0 deletions ...ects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
22 changes: 22 additions & 0 deletions ...cts/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 67 additions & 0 deletions ...jects/Web Development/JavaScript Projects/Others/27). Selection Sort Visualizer/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}
Loading