Estou tentando resolver, mas estou com dificuldades, não sei o que estou fazendo de errado. 

Crie um botão que ao ser clicado cria um novo elemento em tela com a forma de um quadrado vermelho com 100px de altura e largura. Sempre que o botão for clicado um novo quadrado deve aparecer na tela.

 

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div id="app">

      <button class="botao">Adicionar</button>
      <div class="box">
      </div>

    </div>
    <script>
      var btnElement = document.querySelector('button.botao').addEventListener("click", criarQuadrado);
      var newQuadrado = document.querySelector('div.box');
      newQuadrado.style.backgroundColor = red;
      newQuadrado.style.width = 100;
      newQuadrado.style.height = 100;


      function criarQuadrado() {
        btnElement.createElement(newQuadrado);



      }
    </script>

<!-- end snippet -->

<sup>[![screenshot do código][2]<br/>Click para visualizar o screenshot do código][1]</sup>


  [1]: https://i.sstatic.net/9FqRn.png
  [2]: https://i.sstatic.net/9FqRns.png