- 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-heatmap"></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 = [7, 1, 5, 2];
draw(arr);
bubbleSort(arr);
function bubbleSort(arr) {
let len = arr.length - 1;
for (let i = 0; i < len; i++) {
for (let n = 0; n < len - i; n++) {
let temp = arr[n];
arr[n] = arr[n + 1];
arr[n + 1] = temp;
draw(arr, n, n + 1);
}
}
}
Click inside the mini browser to put the focus in this window.
Console
let arr = [7, 1, 5, 2];
draw(arr);
bubbleSort(arr);
function bubbleSort(arr) {
let len = arr.length - 1;
for (let i = 0; i < len; i++) {
for (let n = 0; n < len - i; n++) {
if (arr[n] > arr[n + 1]) {
let temp = arr[n];
arr[n] = arr[n + 1];
arr[n + 1] = temp;
draw(arr, n, n + 1);
}
}
}
}