JSFiddle - React, Tailwind, and code Playground

by gaby de wilde

HTML

<input type="disabled" value="value to find">
<input type="number" value="10" id="seek"><br>
<output id="out"></output><br>

CSS

input{width:80px}
input[type="disabled"]{border:0;}

JavaScript

function foo(x, y, num) {
	for(i=y; i<y+3 && i<10; i++){
		for(w=x; w<x+3 && w<10; w++){
			if(grid[i*10+w] == num){return true}
		}
	}
  return false;
}

grid = Array.from({length: 100},()=>Math.round(Math.random()*9));

// make it look fancy

for(i=0;i<10;i++){
	for(w=0;w<10;w++){
		document.body.innerHTML += `<button data-x="${w}" data-y="${i}">${grid[i*10+w]}</button>`;
	}
	document.body.innerHTML += '<br>';
}
document.body.addEventListener('click',function(e){
	if(e.target.tagName != "BUTTON"){return}
	out.innerHTML = foo(e.target.dataset.x*1,e.target.dataset.y*1,seek.value)?"the value was found":"cant find the value";
})