Hitomezashi

by John Doe

HTML

<button onclick="setClassesAgain()">Set classes again</button>
<div class="container">

</div>

CSS

body, html{
  padding: 0;
  margin: 0;
}
.container {
    display: grid;
    grid-template-columns: repeat(50, 11px); /* 50 oszlop, 10px szélességgel */
    grid-template-rows: repeat(50, 11px); /* 50 sor, 10px magassággal */
    gap: 1px;
}

.cube {
    width: 11px;
    height: 11px;
    background-color: #c0c0c0;
}

.cube--bg {
    background-color: #252525;
}

JavaScript

let x = 50;
let y = 50;

let container = document.getElementsByClassName('container')[0];

if (container) { 
    for(let i = 0; i < x; i++){
    	for (let j = 0; j < y; j++) {
      	let randNum = Math.floor(Math.random() * 2);
        let div = document.createElement('div'); 
        div.classList.add('cube');
        if(randNum == 1){
        	div.classList.add('cube--bg');
        }
        container.appendChild(div);
    	}
    }
} else {
    console.error("Nincs ilyen elem: .container");
}

function setClassesAgain(){
	let elementsNum = document.getElementsByClassName('cube').length;
  console.log(elementsNum);
}