CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Visualizer</title>
<style>
body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#f0f0f0;}
.container{display:flex;max-width:1000px;width:100%;background:white;border-radius:10px;overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.1);}
.controls{flex:1;padding:20px;border-right:1px solid #ddd;}
.visualizer{flex:2;display:flex;flex-direction:column;padding:20px;}
.bars{display:flex;align-items:flex-end;height:300px;margin-top:20px;}
.bar{flex:1;margin:0 1px;background:#3498db;transition:height 0.2s;}
.bar-value{text-align:center;font-size:12px;}
button,select{width:100%;padding:10px;margin:5px 0;border:none;border-radius:5px;cursor:pointer;}
button{background:#3498db;color:white;}
button:hover{background:#2980b9;}
select{background:#f0f0f0;}
@media (max-width:768px){.container{flex-direction:column;} .controls{border-right:none;border-bottom:1px solid #ddd;}}
</style>
</head>
<body>
<div class="container">
<div class="controls">
<h2>Sorting Visualizer</h2>
<select id="algorithm">
<option value="bubble">Bubble Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="selection">Selection Sort</option>
</select>
<button id="startBtn">Start</button>
<button id="newArrayBtn">New Array</button>
<div>Array Size: <input type="range" id="arraySize" min="5" max="50" value="20"></div>
<div>Speed: <input type="range" id="speed" min="1" max="100" value="50"></div>
</div>
<div class="visualizer">
<div id="bars" class="bars"></div>
</div>
</div>
<script>
const bars = document.getElementById('bars');
const startBtn = document.getElementById('startBtn');
const newArrayBtn = document.getElementById('newArrayBtn');
const algorithmSelect = document.getElementById('algorithm');
const speedInput = document.getElementById('speed');
const arraySizeInput = document.getElementById('arraySize');
let array = [];
let arraySize = 20;
let speed = 50;
let sorting = false;
function generateArray() {
array = Array.from({length: arraySize}, () => Math.floor(Math.random() * 100) + 1);
updateBars();
}
function updateBars() {
bars.innerHTML = array.map(value => `
<div class="bar" style="height:${value}%">
<div class="bar-value">${value}</div>
</div>
`).join('');
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function bubbleSort() {
const n = array.length;
for (let i = 0; i < n - 1; i++) {
for (let j = 0; j < n - i - 1; j++) {
if (array[j] > array[j + 1]) {
[array[j], array[j + 1]] = [array[j + 1], array[j]];
updateBars();
await sleep(101 - speed);
}
}
}
}
async function insertionSort() {
const n = array.length;
for (let i = 1; i < n; i++) {
let key = array[i];
let j = i - 1;
while (j >= 0 && array[j] > key) {
array[j + 1] = array[j];
j = j - 1;
updateBars();
await sleep(101 - speed);
}
array[j + 1] = key;
updateBars();
await sleep(101 - speed);
}
}
async function selectionSort() {
const n = array.length;
for (let i = 0; i < n - 1; i++) {
let minIdx = i;
for (let j = i + 1; j < n; j++) {
if (array[j] < array[minIdx]) {
minIdx = j;
}
}
[array[i], array[minIdx]] = [array[minIdx], array[i]];
updateBars();
await sleep(101 - speed);
}
}
startBtn.addEventListener('click', async () => {
if (!sorting) {
sorting = true;
startBtn.disabled = true;
const algorithm = algorithmSelect.value;
switch (algorithm) {
case 'bubble': await bubbleSort(); break;
case 'insertion': await insertionSort(); break;
case 'selection': await selectionSort(); break;
}
sorting = false;
startBtn.disabled = false;
}
});
newArrayBtn.addEventListener('click', generateArray);
speedInput.addEventListener('input', e => speed = parseInt(e.target.value));
arraySizeInput.addEventListener('input', e => {
arraySize = parseInt(e.target.value);
generateArray();
});
generateArray();
</script>
</body>
</html>