https://i.stack.imgur.com/mZaoS.png
Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and set their heights:
var rootContainer;
var barContainer;
var randomNumberButton;
var mergeSortButton;
const NUM_BARS = 70;
function initApp() {
rootContainer = document.querySelector(".algo-container");
barContainer = document.querySelector(".bar-container");
randomNumberButton = document.getElementById("random-number");
mergeSortButton = document.getElementById("merge-sort");
randomNumberButton.addEventListener("click", handleRandomNumberButton);
mergeSortButton.addEventListener("click", handleMergeSortButton);
}
function handleRandomNumberButton(e) {
barContainer.innerHTML = "";
let numbers = [];
for (let i = 0; i < NUM_BARS; i++) {
numbers.push(generateRandomNumber(340, 100));
}
let ul = document.createElement("ul");
ul.style.height = "100%";
ul.style.width = "100%";
for (let i = 0; i < NUM_BARS; i++) {
let li = document.createElement("li");
li.style.backgroundColor = "#576cff";
li.style.width = "8px";
li.style.marginLeft = "1px";
li.style.marginRight = "6px";
li.style.height = `${numbers[i]}px`;
ul.appendChild(li);
}
barContainer.appendChild(ul);
}
function handleMergeSortButton(e) {}
function generateRandomNumber(b, a) {
return Math.round(Math.random() * (b - a) + a);
}
window.addEventListener("DOMContentLoaded", initApp);li {
display: inline-block
}<div class="algo-container"></div>
<div class="bar-container"></div>
<input id="random-number" type="button" value="Random" />
<input id="merge-sort" type="button" value="Merge - sort" />