<div class="test">
  <input type="number" class="test__input-number js-number"/>
  <div class="test__building js-building"></div>
</div>
.test
  margin: 2rem
  
  &__input-number
    margin-bottom: 1rem
    
  &__building
    text-align: center
  
View Compiled
const inputNumber = document.querySelector('.js-number');

const build = () => {
  const building = document.querySelector('.js-building');
  const numberValue = parseInt(inputNumber.value);
  let result = [];
  let resultStr = '';
  
  for (let j = 0; j < numberValue; j++) {
    resultStr += '*';  
    result.push(`${resultStr}<br>`);
  }
  
  const herringbone = result.join().replace(/[\s.,%]/g, '');
  
  building.innerHTML = herringbone;
};

inputNumber.addEventListener('change', build);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.