Simple create box enviro v2 (return different handlers)

by ShaCP

CSS

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

.create_box {
  margin-top: 1rem;
}

JavaScript

var boxControlCreator = () => {

var boxCreatorString = 
`
<div class="box_creator">
<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>
<div>
`;

var boxCreator = new DOMParser().parseFromString(boxCreatorString , 'text/html').body.firstChild;
var container = boxCreator.querySelector(".box_container");
var sizeInputField = boxCreator.querySelector(".size_input_field");
var isResizeHandlerAdded = false;
var addResizeHandler = () => {
isResizeHandlerAdded = true;
window.addEventListener("resize", createBox);
}
var removeResizeHandler = () => window.removeEventListener("resize", createBox);
var removeBox = () => window.removeEventListener("resize", createBox);
var size;

function createBox(e) {
if (!isResizeHandlerAdded) {
addResizeHandler();
}

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 = boxCreator.querySelector(".create_box");
createBoxButton.addEventListener("click", createBox);

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

var boxControl = boxControlCreator();
var boxControl2 = boxControlCreator();


document.body.appendChild(boxControl.addBoxCreator());
document.body.appendChild(boxControl2.addBoxCreator());