const container = document.querySelector(
".data-container"
);
function
generatebars(num = 20) {
for
(let i = 0; i < num; i += 1) {
const value = Math.floor(Math.random() * 100) + 1;
const bar = document.createElement(
"div"
);
bar.classList.add(
"bar"
);
bar.style.height = `${value * 3}px`;
bar.style.transform = `translateX(${i * 30}px)`;
const barLabel = document.createElement(
"label"
);
barLabel.classList.add(
"bar__id"
);
barLabel.innerHTML = value;
bar.appendChild(barLabel);
container.appendChild(bar);
}
}
async
function
CocktailSort(delay = 600) {
let bars = document.querySelectorAll(
".bar"
);
let swapped =
true
;
let s = 0;
let e = 20;
while
(swapped ==
true
) {
swapped =
false
;
for
(let i = s; i < e - 1; i++) {
let value1 = parseInt(bars[i]
.childNodes[0].innerHTML);
let value2 = parseInt(bars[i + 1]
.childNodes[0].innerHTML);
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.backgroundColor =
"red"
;
bars[i + 1].style.backgroundColor =
"red"
;
if
(value1 > value2) {
let temp1 = bars[i].style.height;
let temp2 = bars[i].childNodes[0].innerText;
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.height = bars[i + 1].style.height;
bars[i].childNodes[0].innerText =
bars[i + 1].childNodes[0].innerText;
bars[i + 1].style.height = temp1;
bars[i + 1].childNodes[0].innerText = temp2;
swapped =
true
;
}
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.backgroundColor =
"rgb(0, 183, 255)"
;
bars[i + 1].style.backgroundColor =
"rgb(0, 183, 255)"
;
}
if
(swapped ==
false
) {
break
;
}
swapped =
false
;
e = e - 1;
for
(
var
i = e - 1; i >= s; i--) {
let value1 = parseInt(bars[i]
.childNodes[0].innerHTML);
let value2 = parseInt(bars[i + 1]
.childNodes[0].innerHTML);
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.backgroundColor =
"red"
;
bars[i + 1].style.backgroundColor =
"red"
;
if
(value1 > value2) {
let temp1 = bars[i].style.height;
let temp2 = bars[i].childNodes[0].innerText;
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.height = bars[i + 1].style.height;
bars[i].childNodes[0].innerText =
bars[i + 1].childNodes[0].innerText;
bars[i + 1].style.height = temp1;
bars[i + 1].childNodes[0].innerText = temp2;
swapped =
true
;
}
await
new
Promise((resolve) => setTimeout(() => {
resolve();
}
, 300));
bars[i].style.backgroundColor =
"rgb(0, 183, 255)"
;
bars[i + 1].style.backgroundColor =
"rgb(0, 183, 255)"
;
}
s = s + 1;
}
for
(let x = 0; x < 20; x++) {
bars[x].style.backgroundColor =
"rgb(49, 226, 13)"
;
}
document.getElementById(
"Button1"
)
.disabled =
false
;
document.getElementById(
"Button1"
)
.style.backgroundColor =
"#6f459e"
;
document.getElementById(
"Button2"
)
.disabled =
false
;
document.getElementById(
"Button2"
)
.style.backgroundColor =
"#6f459e"
;
}
generatebars();
function
generate() {
window.location.reload();
}
function
disable() {
document.getElementById(
"Button1"
)
.disabled =
true
;
document.getElementById(
"Button1"
)
.style.backgroundColor =
"#d8b6ff"
;
document.getElementById(
"Button2"
)
.disabled =
true
;
document.getElementById(
"Button2"
)
.style.backgroundColor =
"#d8b6ff"
;
}