Untitled

<html>
  <head>
    <style>
      #wrapper div {
        background: blue;
        height: 50px;
        width: 50px;
        margin: 2px;
      }

      #message {
        display: none;
        position: fixed;
        margin: 25%;
        background: gray;
        height: 3em;
        padding-top: 2em;
        width: 50%;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="heightInfo">Number of elements: 0.</div>
    <div id="message">Items added!</div>
    <div id="wrapper"></div>
    
    
  <script>
    function addItem() {
      const newElement = document.createElement("div");
      wrapper.appendChild(newElement);
      requestAnimationFrame(() => {
        height = wrapper.getBoundingClientRect().height;  
      });
      n += 1;
    }

    function trackElements() {
      infoBox.innerText = `Number of elements: ${n}.`;
    }

    function addNewItem() {
      addItem();
      trackElements();
    }

    const wrapper = document.getElementById("wrapper");
    const infoBox = document.getElementById("heightInfo");
    let n = 0;
    let height;

    document.addEventListener("keyup", e => {
      switch (event.key) {
        case "s":
          addNewItem();
          break;
      }
      console.log('Finished');
    });
  </script>
  </body>
</html>