Grid Buttons

by Tom M

HTML

<div id="output">

</div>

<div id="submitBox">
  <input type="text">
</div>

CSS

.classSelect {
  fill: white;
}

.classReverse {
  fill: black;
}

JavaScript

// 
//var code = "";
//for (var i = 0; i < 11; i += 1) {
//  
//  code +=  "<rect x='" + i + "' y='" + i + "' width='" + 20 + "' height='" + 20 + "' fill='black' />;";
//  
//} 
//document.write("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'>" + code + "</svg>");
const widthValue = 20;
const heightValue = 20;
var yCoOrd = 0

var topRow = "";
var secondRow = "";
var test = "";

for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
    topRow +=  "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}


yCoOrd = 20;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 40;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 60;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 80;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 100;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 120;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 140;
for (var xCoOrd = 0; xCoOrd <= 200; xCoOrd += 20) {
topRow += "<rect x='" + xCoOrd + "' y='" + yCoOrd + "' width='" + widthValue + "' height='" + heightValue + "' fill='black' />;";
}

yCoOrd = 160;
for...