JS Stack

stack by JavaScript.

by Tinytsunami

HTML

<div id="demo">
  <input type="text" /> <button>Push</button>
  <br />
  <input type="text" readonly="readonly" /> <button>Pop</button>
  <br />
  <div></div>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo input {
  width: 100px;
  color: #ffffff;
  background: #20262e;
  outline: none;
  border: none;
  border-bottom: 1px solid #ffffff;
}

#demo input[readonly="readonly"] {
  margin-top: 10px;
  width: 100px;
  color: #ffffff;
  background: #30363e;
  border: 1px solid #ffffff;
}

#demo button {
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
}

#demo button:hover {
  color: #20262e;
  background: #ffffff;
  border: 1px solid #ffffff;
}

#demo>div {
  display: inline-block;
  margin-top: 20px;
  min-width: 40px;
  min-height: 10px;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  text-align: center;
}

JavaScript

(function() {
  /* get elements */
  let root = document.getElementById("demo");
  let inputNode = root.getElementsByTagName("input")[0];
  let outputNode = root.getElementsByTagName("input")[1];
  let pushNode = root.getElementsByTagName("button")[0];
  let popNode = root.getElementsByTagName("button")[1];
  let showNode = root.getElementsByTagName("div")[0];

  pushNode.onclick = function() {
    push(inputNode.value);
    inputNode.value = "";
    refresh();
  };

  popNode.onclick = function() {
    outputNode.value = pop();
    refresh();
  };

  /* show data refresh */
  let refresh = function() {
    /* clear show */
    while (showNode.firstChild)
      showNode.removeChild(showNode.firstChild);
    /* create show */
    for (let i = top - 1; i >= 0; i--) {
      let node = document.createElement("div");
      let text = document.createTextNode(stack[i]);
      node.appendChild(text);
      showNode.appendChild(node);
    }
  };

  /* stack variables */
  let stack = [];
  let top = 0;

  /* stack push */
  let push = function(data) {
    stack[top++] = data;
  };

  /* stack pop */
  let pop = function() {
    return stack[--top];
  };

})();