Bubble Sort & Step-by-Step Algorithm Visualizer

(function() {
	var container = document.getElementById('barsContainer');
	if (!container) return;

	var array = [45, 12, 85, 32, 89, 39, 69, 44, 42, 10, 54, 76, 23, 95, 18];
	var comparisons = 0;
	var swaps = 0;
	var isSorting = false;

	function renderBars(comparingIndices, sortedIndices) {
		container.innerHTML = '';
		comparingIndices = comparingIndices || [];
		sortedIndices = sortedIndices || [];

		array.forEach(function(val, idx) {
			var bar = document.createElement('div');
			bar.className = 'sort-bar';
			bar.style.height = (val * 2.2) + 'px';
			if (comparingIndices.indexOf(idx) !== -1) {
				bar.classList.add('comparing');
			}
			if (sortedIndices.indexOf(idx) !== -1) {
				bar.classList.add('sorted');
			}
			container.appendChild(bar);
		});
		document.getElementById('compCount').innerText = comparisons;
		document.getElementById('swapCount').innerText = swaps;
	}

	renderBars();

	document.getElementById('shuffleBtn').onclick = function() {
		if (isSorting) return;
		for (var i = array.length - 1; i > 0; i--) {
			var j = Math.floor(Math.random() * (i + 1));
			var temp = array[i]; array[i] = array[j]; array[j] = temp;
		}
		comparisons = 0; swaps = 0;
		renderBars();
	};

	async function bubbleSort() {
		isSorting = true;
		var n = array.length;
		var sortedIndices = [];

		for (var i = 0; i < n - 1; i++) {
			for (var j = 0; j < n - i - 1; j++) {
				comparisons++;
				renderBars([j, j + 1], sortedIndices);
				await new Promise(r => setTimeout(r, 60));

				if (array[j] > array[j + 1]) {
					swaps++;
					var temp = array[j];
					array[j] = array[j + 1];
					array[j + 1] = temp;
					renderBars([j, j + 1], sortedIndices);
					await new Promise(r => setTimeout(r, 60));
				}
			}
			sortedIndices.push(n - i - 1);
		}
		sortedIndices.push(0);
		renderBars([], sortedIndices);
		isSorting = false;
	}

	document.getElementById('startSortBtn').onclick = function() {
		if (isSorting) return;
		bubbleSort();
	};
})();

<div class="sort-sim-box">
	<div class="sort-canvas-area" id="barsContainer"></div>
	<div class="sort-controls">
		<button type="button" id="shuffleBtn" class="s-btn">🔀 Shuffle</button>
		<button type="button" id="startSortBtn" class="s-btn primary">▶ Start Bubble Sort</button>
		<button type="button" id="stepBtn" class="s-btn">⏭ Step</button>
		<div class="stat-pill">Comparisons: <strong id="compCount">0</strong></div>
		<div class="stat-pill">Swaps: <strong id="swapCount">0</strong></div>
	</div>
</div>

.sort-sim-box { background: #0f172a; padding: 18px; border-radius: 16px; color: #fff; font-family: inherit; display: flex; flex-direction: column; gap: 14px; }
.sort-canvas-area { height: 260px; background: #020617; border-radius: 12px; border: 1px solid #1e293b; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 20px; }
.sort-bar { flex: 1; max-width: 24px; background: #38bdf8; border-radius: 6px 6px 0 0; transition: height 0.15s ease, background 0.15s; position: relative; }
.sort-bar.comparing { background: #f59e0b !important; }
.sort-bar.swapping { background: #ef4444 !important; }
.sort-bar.sorted { background: #10b981 !important; }
.sort-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: #1e293b; padding: 12px 16px; border-radius: 12px; }
.s-btn { padding: 8px 14px; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-weight: 700; font-size: 11px; cursor: pointer; }
.s-btn.primary { background: #f59e0b; color: #020617; border: none; font-weight: 800; }
.stat-pill { font-size: 11px; color: #94a3b8; font-family: monospace; background: #0f172a; padding: 6px 10px; border-radius: 6px; border: 1px solid #334155; }
.stat-pill strong { color: #38bdf8; }