JSFiddle - React, Tailwind, and code Playground

by Tom M

HTML

<div class="userInput">
<label>Width &amp; height of grid squares<input class="squareDimensions" type="text" placeholder = "How wide/high in(px)?"></label>
<label>How many squares horizontally?<input class="horizontalSquares" type="text" placeholder= "How many across?"></label>
<label>How many squares vertically?<input class="verticalSquares" type="text" placeholder= "How many up?"></label>
<button class="fieldInputs">Submit</button>
</div>

<div id="listen">
<div class="output"></div>
<div class="lowerOutput"></div>
</div>

CSS

label {
  display: block;
}


.output * {
  display: inline-block;
  margin: 0 1px;
}

.makeWhite {
  background-color: white;
}

.default {
  background-color: black;
}

JavaScript

let divOutput = document.querySelector(".output");
let divOutputLower = document.querySelector(".lowerOutput");
/* Get inputs */
let inputDimensions = document.querySelector(".squareDimensions");
let inputHorizontal = document.querySelector(".horizontalSquares");
let inputVertical = document.querySelector(".verticalSquares");
let inputDiv = document.querySelector(".userInput");
let divListener = document.getElementById("listen");
let gridSquareCounter;

const makeSquare = () => {
  let squareDimensions = inputDimensions.value;
	let horizontalNumber = inputHorizontal.value;
	let verticalNumber = inputVertical.value;
  
  
  for (let i=0; i < horizontalNumber; i += 1) {
  	gridSquareCounter = "gridSquare" + i;
    console.log(gridSquareCounter);
  	gridSquareCounter = document.createElement("div");
    gridSquareCounter.style.width = squareDimensions + "px";
    gridSquareCounter.style.height = squareDimensions + "px";
    gridSquareCounter.classList.add("default");
    divOutput.appendChild(gridSquareCounter); 
  	}
    
  for (let j=1; j < verticalNumber; j+= 1) {
  	let gridRowCounter = "gridRow" + j;
    gridRowCounter = divOutput.cloneNode(true);
    divOutputLower.appendChild(gridRowCounter);
  	}
    

}

inputDiv.addEventListener ('click', (event) => {
	if (event.target.tagName == "BUTTON") {
		makeSquare();
  }
});

    divListener.addEventListener ('click', (event) => {
	if (event.target.className == "default") {
		alert('click');
  }
  
});