shared.js

const container = document.querySelector(".data-container");
function generate() {
    container.innerHTML = "";
    document.getElementById("ele").textContent = "";
    const containerWidth = container.clientWidth;
    const barWidth = 32;
    const barGap = 8;
    const numberOfBars = Math.floor(containerWidth / (barWidth + barGap));
    for (let i = 0; i < numberOfBars; i++) {
        const value = Math.floor(Math.random() * 90) + 10;
        const bar = document.createElement("div");
        bar.classList.add("bar");
        bar.style.height = `${value * 2.8}px`;
        bar.style.width = `${barWidth}px`;
        bar.setAttribute("data-value", value);
        const barLabel = document.createElement("label");
        barLabel.classList.add("bar_id");
        barLabel.innerText = value; // Show the number
        bar.appendChild(barLabel);
        container.appendChild(bar);
    }
}
function disable() {
    document.getElementById("Button1").disabled = true;
    document.getElementById("Button2").disabled = true;
}
function enable() {
    document.getElementById("Button1").disabled = false;
    document.getElementById("Button2").disabled = false;
}
function swapBars(bar1, bar2) {
    return new Promise((resolve) => {
        const tempHeight = bar1.style.height;
        const tempValue  = bar1.getAttribute("data-value");
        bar1.style.height = bar2.style.height;
        bar1.setAttribute("data-value", bar2.getAttribute("data-value"));
        bar1.querySelector(".bar_id").innerText = bar2.getAttribute("data-value");
        bar2.style.height = tempHeight;
        bar2.setAttribute("data-value", tempValue);
        bar2.querySelector(".bar_id").innerText = tempValue;
        setTimeout(resolve, 100);
    });
}
generate();
window.addEventListener("resize", () => {
    if (!document.getElementById("Button2").disabled) {
        generate();
    }
});