如何使用HTML、CSS和Javascript创建堆栈可视化器

在本文中，我们将看到如何使用HTML、CSS和Javascript创建一个堆栈可视化器，并通过示例理解其实现。

堆栈是一种著名的线性数据结构，遵循后进先出（LIFO）或先进后出（FILO）的顺序。

有很多现实生活中堆栈的例子。比如，图书馆的书堆是堆栈的一个很好的现实生活中的例子。如果我们想要清理堆栈，那么我们必须删除堆栈中的第一本书或者顶部的书，即位于底部位置的那本书将在堆栈中保留最长时间。因此，它遵循LIFO（后进先出）/FILO（先进后出）顺序。

在本文中，我们将告诉如何使用HTML、CSS和Javascript从头开始构建堆栈可视化器。在这个堆栈可视化器中，我们有一个桶，我们可以把元素放进去，桶有一个包含一定数量元素的限制。当超过限制时，但我们尝试放入一个元素，堆栈溢出消息将显示在消息框中，然后我们需要从堆栈中弹出元素以插入新的元素。当我们想从一个空堆栈中弹出一个元素时，堆栈下溢消息将显示在消息框中。

方法： 我们将使用以下方法来创建堆栈可视化器：

创建一个项目文件夹，并在其中创建三个文件“index.html”（用于编写HTML）、“style.css”（用于编写CSS）和“index.js”（用于编写js）。您还可以创建一个单独的文件来保存页面响应性的CSS代码。
现在首先使用 HTML和CSS 创建可视化器的界面。首先创建一个标题。然后在标题之后创建一个包含整个可视化器的容器盒子。现在在这个容器中添加一个输入框和三个按钮，用于推入一个元素、弹出一个元素和重置可视化器。
然后在输入框和按钮下方，使用一个div创建一个桶，并给予 左侧、右侧和底部 边框，并使 顶部边框为空 。没有在CSS中设置。这样你就可以创建桶。
在桶的左边，创建四个选项来显示栈的顶部、最近弹出的元素、最近推入的元素以及栈的大小。另外，在信息部分下面创建一个消息框来显示消息。使用flexbox属性来对齐和调整所有内容的位置。
现在添加一些JavaScript代码来完全实现可视化效果。首先，使用”document.querySelector”选中所有需要在JavaScript中使用的元素，并将它们存储在变量中。此外，声明一个空数组，我们将使用和维护它作为内部栈。
现在创建两个函数，一个用于禁用三个按钮，另一个用于启用三个按钮。使用”button.disabled = true”来禁用按钮。同时，更新内部堆栈或数组。您还可以添加 setTimeout 函数来显示添加元素的延迟。此外，在元素推送时间内禁用这三个按钮。推送元素后，更新顶部的值、最近推送的元素详情，并在消息框中显示成功的消息。
现在编写“Pop”按钮的功能。首先，使用if语句检查 堆栈下溢 条件。如果堆栈没有元素，则显示堆栈下溢的消息。如果有元素，则使用“ bucket.removeChild ”弹出最后一个元素，同时删除内部堆栈中的最后一个元素。最后更新顶部和最近弹出的元素。您还可以添加setTimeout函数以动画显示弹出元素的延迟。”
最后，编写重置按钮的函数。首先，清空内部堆栈。然后使用“ innerHTML ”将所有信息内容设置为空，同时使用 “bucket.removeChild” 从桶中删除所有元素。

示例：

这个示例演示了如何使用HTML CSS和Javascript构建一个堆栈可视化器。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <!-- heading -->
    <header>
        <h1 class="heading">GeeksforGeeks</h1>
        <h3 class="title">Stack Visualizer</h3>
    </header>
 
    <div class="container">
        <div class="container-header">
            <input type="number" class="text" required>
            <button class="push">Push</button>
            <button class="pop ">Pop</button>
            <button class="reset">Reset</button>
        </div>
 
        <div class="container-body">
            <div class="stack">
                <div class="main-stack-bucket"></div>
            </div>
 
            <div class="info">
                <div class="sec1">
                    <h3>Top of the Stack:-</h3>
                    <button class="box"></button>
                </div>
                <div class="sec2">
                    <h3>Last Pushed Item:-</h3>
                    <button class="box"></button>
                </div>
                <div class="sec3">
                    <h3>Last Popped Item:-</h3>
                    <button class="box"></button>
                </div>
                <div class="sec3">
                    <h3>Size of the Stack:-</h3>
                    <button class="box">5</button>
                </div>
 
                <div class="massage-box">
                    <h2>Massage Box</h2>
                    <div class="massage"></div>
                </div>
            </div>
 
        </div>
    </div>
 
    <!-- script -->
    <script src="./index.js"></script>
</body>
 
</html>

Style.css

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    background-color: rgb(231, 231, 231);
}
header {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.heading {
    color: green;
}
 
.container {
    height: 620px;
    width: 1000px;
    background-color: white;
    box-shadow: 8px 8px 20px rgb(128, 128, 128);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
 
.container-header {
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
}
 
.container-header input {
    height: 50px;
    width: 400px;
    font-size: 25px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 5px;
}
 
.push,
.pop,
.reset,
.box {
    height: 50px;
    width: 140px;
    font-size: 25px;
    background-color: green;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    border: none;
}
.disable-button {
    background-color: rgb(0, 59, 0);
}
 
.container-header button:active {
    transform: scale(0.95);
}
.container-body {
    width: 1000px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
 
.stack {
    width: 500px;
    height: 470px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 0 3px 0 0;
    border-color: black;
    border-style: solid;
}
 
.main-stack-bucket {
    height: 450px;
    width: 200px;
    border-width: 0 4px 4px 4px;
    border-color: black;
    border-style: solid;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column-reverse;
    gap: 5px;
    padding-bottom: 5px;
}
 
.ele {
    height: 80px;
    width: 170px;
    background-color: green;
    color: white;
    border: 4px black solid;
    border-radius: 10px;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ele-add {
    animation: pushAnimation 0.3s infinite linear;
}
.ele-remove {
    animation: popAnimation 0.3s infinite linear;
}
@keyframes pushAnimation {
    0% {
        background-color: green;
    }
    100% {
        background-color: rgb(17, 92, 255);
    }
}
@keyframes popAnimation {
    0% {
        background-color: green;
    }
    100% {
        background-color: rgb(255, 15, 59);
    }
}
 
.info {
    height: 470px;
    width: 500px;
    padding-left: 20px;
}
 
[class^="sec"] {
    display: flex;
    width: 350px;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    justify-content: space-between;
}
 
.massage-box {
    height: 180px;
    width: 400px;
    margin-top: 30px;
    padding: 10px;
    border-radius: 10px;
    background-color: bisque;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
 
.massage-box h2 {
    text-align: center;
    font-weight: 600;
}
 
.massage {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}
.error-massage {
    animation: errorMassage 0.4s infinite linear;
}
@keyframes errorMassage {
    0% {
        background-color: bisque;
    }
    100% {
        background-color: rgb(255, 15, 59);
    }
}

Index.js:

Javascript

//variable Declaration
const push = document.querySelector(".push");
const pop = document.querySelector(".pop");
const reset = document.querySelector(".reset");
const bucket = document.querySelector(".main-stack-bucket");
const input = document.querySelector(".text");
const massage = document.querySelector(".massage");
const massageBox = document.querySelector(".massage-box");
const box = document.querySelectorAll(".box");
const stack = [];
 
//for disable all buttons
const buttonDisable = () => {
    push.disabled = true;
    push.classList.add("disable-button");
    pop.disabled = true;
    pop.classList.add("disable-button");
    reset.disabled = true;
    reset.classList.add("disable-button");
    input.disabled = true;
};
 
//for enable all buttons
const buttonEnable = () => {
    push.disabled = false;
    push.classList.remove("disable-button");
    pop.disabled = false;
    pop.classList.remove("disable-button");
    reset.disabled = false;
    reset.classList.remove("disable-button");
    input.disabled = false;
};
 
//When the push button will be clicked
push.addEventListener("click", () => {
    //if input box is empty
    if (input.value == "") {
        massage.innerHTML = "Please Enter a value.";
        massageBox.classList.add("error-massage");
        setTimeout(() => {
            massageBox.classList.remove("error-massage");
        }, 1200);
        return;
    }
 
    //if the stack is full
    if (stack.length == 5) {
        input.value = "";
        massage.innerHTML = "Stack Overflow";
        massageBox.classList.add("error-massage");
        setTimeout(() => {
            massageBox.classList.remove("error-massage");
        }, 1200);
        return;
    }
    const itemValue = input.value; //for store the input value
    stack.push(itemValue); //push the value into the stack
 
    //creating a new element
    const element = document.createElement("div");
    element.classList.add("ele");
    element.innerText = stack[stack.length - 1];
    bucket.appendChild(element);
 
    //update the top
    box[0].innerHTML = stack[stack.length - 1];
 
    //clear the input box
    input.value = "";
 
    //adding the animation for a new pushed element
    element.classList.add("ele-add");
 
    //disable all buttons
    buttonDisable();
 
    //after pushing the element
    setTimeout(() => {
        //remove the animation
        element.classList.remove("ele-add");
 
        //update the Last Pushed Item Value
        box[1].innerHTML = itemValue;
 
        //Display the massage
        massage.innerHTML = `Item {stack[stack.length - 1]} is Pushed.`;
 
        //Enable all buttons
        buttonEnable();
    }, 1500);
});
 
//When the pop button will be clicked
pop.addEventListener("click", () => {
    //if Stack is Empty
    if (stack.length == 0) {
        massageBox.classList.add("error-massage");
        massage.innerHTML = "Stack Underflow";
        setTimeout(() => {
            massageBox.classList.remove("error-massage");
        }, 1200);
        return;
    }
 
    //adding the popping animation
    bucket.lastElementChild.classList.add("ele-remove");
 
    //disable all buttons
    buttonDisable();
 
    //start popping the element
    setTimeout(() => {
        //delete the element from the bucket
        bucket.removeChild(bucket.lastElementChild);
         
        //Storing the popped value
        const itemValue = stack.pop();
         
        //updating the last popped item
        box[2].innerHTML = itemValue; 
 
        //updating the Top
        if (stack.length == 0) {
            box[0].innerHTML = "";
        } else {
            box[0].innerHTML = stack[stack.length - 1];
        }
 
        //adding the massage
        massage.innerHTML = `Item{itemValue} is Popped.`;
 
        //Enable all buttons
        buttonEnable();
    }, 1500);
});
 
//When the reset button will be clicked
reset.addEventListener("click", () => {
    //clear the full array
    while (stack.length > 0) {
        stack.pop();
    }
 
    //clear all fields
    box[0].innerHTML = "";
    box[1].innerHTML = "";
    box[2].innerHTML = "";
    massage.innerHTML = "";
 
    //clear all elements from the bucket
    while (bucket.firstChild) {
        bucket.removeChild(bucket.firstChild);
    }
});