Simple create box enviro

by ShaCP

HTML

<div class="size_input">
<label>
Enter width:
<input class="size_input_field" type="text" value="0.1">
</label>
</div>
<button class="create_box">
Create Box
</button>
<div class="box_container">
</div>

CSS

.box {
  background-color: lightcoral;
  margin-top: 1rem;
}

.create_box {
  margin-top: 1rem;
}

JavaScript

var boxControl = (() => {
var container = document.querySelector(".box_container");
var sizeInputField = document.querySelector(".size_input_field");
var resizeEventListenerAdded = false;
var size;

function createBox(e) {
if (!resizeEventListenerAdded) {
resizeEventListenerAdded = true;
window.addEventListener("resize", createBox);
}

if (e.type === "click") {
size =  sizeInputField.value;
}

var box = `<div class="box" style="width: ${window.innerWidth * size}px; height: ${window.innerWidth * size}px;"></div>`
container.innerHTML = box;
}

var createBoxButton = document.querySelector(".create_box");
createBoxButton.addEventListener("click", createBox);

return {
removeResizeHandler: () => window.removeEventListener("resize", createBox),
removeBox: () => window.removeEventListener("resize", createBox),
};
})();