<button onclick="btnEvent()">Event</button>

<div class="alert border">
  This is the alert
</div>

<div class="squares border">
</div>



.squares {
  border: solid 1px black;
  max-width: 300px;
  min-height: 50px;
  margin-top: 20px;
}

.square {
  border: solid 1px black;
  width: 150px;
  height: 50px;
  margin: 20px auto;
}

.alert  {
  text-align:center;
  max-width: 300px;
  min-height: 20px;
  margin-top: 20px;
}


let numberOfSquares = 0;
function btnEvent(){
  numberOfSquares += 1;
  
  // display the squares
  let squares = '';
  Array(numberOfSquares).fill(null).forEach(() => {
    squares += '<div class="square"></div>';
  });
  document.querySelector('.squares').innerHTML = squares;
  
  // display alert message
  const alert = document.querySelector('.alert');
  alert.innerHTML = `The number of squares is: ${numberOfSquares}`;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.