Skip to content

Commit

Permalink
sorting visualizer task complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@vishal2005025
vishal2005025 committed Oct 23, 2023
0 parents commit 7f6b68f
Show file tree
Hide file tree
Showing 4 changed files with 631 additions and 0 deletions.
188 changes: 188 additions & 0 deletions bubble_sort.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Sort Visualization</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background-image: url('https://img.freepik.com/free-vector/gradient-style-network-connection-background_23-2148876716.jpg?size=626&ext=jpg&ga=GA1.1.508824631.1698051133&semt=ais');
}

#inputForm {
margin-bottom: 20px;
}

#barsContainer {
display: flex;
justify-content: center;
align-items: flex-end;
height: 700px;
}

.bar {

width: 80px;
margin-right: 5px;
display: inline-block;
background-color:white;
height: 20px;
transition: background-color 0.5s;
position: relative;
}

.bar span {
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
text-align: center;
font-size: 20px;
color:white;
}
label{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: xx-large;
margin: 10px;
font: bolder;
color: white;

}
button{
padding: 10px;
width: 200px;
margin-top: 50px;
font: bolder;
font-size: xx-large;
border-radius: 5px;
border-color:aliceblue;
text-align: center;
margin-left: 40%;
background-color: orangered;
color: white;
}
button:hover {
background: #03f40f;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03f40f,
0 0 25px #03f40f,
0 0 50px #03f40f,
0 0 100px #03f40f;
transition: 0.5s;
}

input{
box-sizing: border-box;
height: 35px;
width: 400px;
border-radius: 8px;
background-color: white;
font-size: x-large;
}
h1{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 50px;
color:white;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div id="inputForm">
<form onsubmit="startVisualization(event)">
<h1>Bubble Sort Visualization</h1>
<label for="arraySize" >Enter Array size:</label>
<input type="number" id="arraySize" name="arraySize" required>
<br>
<label for="arrayElements">Enter Array elements:</label>
<input type="text" id="arrayElements" name="arrayElements" required placeholder="input number less than 70">
<br>
<button id="mybutton" type="submit">Sort</button>
</form>
</div>

<div id="barsContainer">
<div id="bars"></div>
</div>

<script>
// Function to create and display bars representing array elements
function displayBars(array, selectedIndexes = []) {
var barsDiv = document.getElementById("bars");
barsDiv.innerHTML = "";

for (var i = 0; i < array.length; i++) {
var barHeight = array[i] * 10; // Scale factor to make bars visible
var bar = document.createElement("div");
bar.className = "bar";
if (selectedIndexes.includes(i)) {
bar.style.backgroundColor = "red";
}
bar.style.height = barHeight + "px";

var valueSpan = document.createElement("span");
valueSpan.textContent = array[i];

bar.appendChild(valueSpan);
barsDiv.appendChild(bar);
}
}

// Function to perform selection sort and update the visualization
async function bubbleSort(array) {
for (var i = 0; i < array.length; i++) {
var swaped= false;

for (var j = 0; j < array.length-i-1; j++) {
if (array[j+1] < array[j]) {

// Swap elements
var temp = array[j+1];
array[j+1] = array[j];
array[j] = temp;

}
// Update visualization
displayBars(array, [j+1, j]);
await sleep(500); // Delay for visualization
}
if (swaped)
{
break;
}
}

// Final visualization with sorted array
displayBars(array);
}

// Helper function for delaying execution
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

// Function to start the visualization
async function startVisualization(event) {
event.preventDefault(); // Prevent form submission

var arraySizeInput = document.getElementById("arraySize");
var arrayElementsInput = document.getElementById("arrayElements");

var n = parseInt(arraySizeInput.value);
var array = arrayElementsInput.value
.split(" ")
.map(element => parseInt(element));

await bubbleSort(array);

console.log("Sorted array:", array);
}
</script>
</body>
</html>


75 changes: 75 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
background-image: url('https://img.freepik.com/free-vector/background-realistic-abstract-technology-particle_23-2148431735.jpg?size=626&ext=jpg');

}

h1{
font-size: 8vw;
color: white;
text-transform: uppercase;
text-align: center;
}
p{
color: white ;
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
a{
text-decoration: none;
font-size:50px;
border-radius: 50%;
color: white;

}
.sort{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
button{

font: bolder;

border-radius: 5px;
border-color:aliceblue;
text-align: center;

background-color: orangered;
color: white;
}
button:hover {
background: #03f40f;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03f40f,
0 0 25px #03f40f,
0 0 50px #03f40f,
0 0 100px #03f40f;
transition: 0.5s;
}

</style>
</head>
<body>
<div class="header">
<h1>welcome!</h1>
<p>which type of sorting method you want to understand. </p>
<div class="sort">
<button><a href="bubble_sort.html" target="_blank">BUBBLE SORT</a></button>
<button><a href="insertion_sort.html" target="_blank">INSERTION SORT</a></button>
<button><a href="selection_sort.html" target="_blank">SELECTION SORT</a></button>
</div>

</div>
</body>
</html>
Loading

0 comments on commit 7f6b68f

Please sign in to comment.