- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Algorithms: Bubble Sort</title>
<link rel="stylesheet" href="setting.css">
</head>
<body>
<div class="plot-container plot-regular"></div>
<script>
function draw(arr, swap1, swap2) {
const container = document.querySelector(".plot-container");
const row = document.createElement("div");
row.className = "row";
for (let i = 0; i < arr.length; i++) {
const num = arr[i];
const div = document.createElement("div");
div.classList.add("dot", "dot-" + num);
div.textContent = num;
if ((swap1 === i) || (swap2 === i)) {
div.classList.add("dot-swapped");
}
row.appendChild(div);
}
container.appendChild(row);
}
</script>
<script src="script.js"></script>
</body>
</html>
CSS
JavaScript
let arr = [4, 6, 8, 1, 7];
draw(arr);
bubbleSort(arr);
function bubbleSort(arr) {
let n = arr.length - 1;
for (let pass = 0; pass < n; pass++) {
for (let j = 0; j < n - pass; j++) {
if (arr[j] > arr[j + 1]) {
// Swapping elements
draw(arr, j, j + 1);
}
}
}
}
Click inside the mini browser to put the focus in this window.
Console
let arr = [4, 6, 8, 1, 7];
draw(arr);
bubbleSort(arr);
function bubbleSort(arr) {
let n = arr.length - 1;
for (let pass = 0; pass < n; pass++) {
for (let j = 0; j < n - pass; j++) {
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
draw(arr, j, j + 1);
}
}
}
}