<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.