alert("Click any letter on the grid to reveal wether or not the letter picked has a adjacent clone."); const doc = (selector,all=false) => { return all&&selector[0]=='.'? document.querySelectorAll(selector): document.querySelector(selector); }; var aOA = Array(); var listItem; //var tableRow; onload = ()=>{ doc("#buildBtn").addEventListener('click',buildGrid); doc("#grid").addEventListener('click',getId); doc("#delBtn").addEventListener('click',deleteGrid); doc("#reset").addEventListener('click',buildGrid); doc('#list_container').addEventListener('click',(evt)=>doc('#'+evt.target.id).click()); userInputColumn = doc('#gridColumn'); userInputRow = doc('#gridRow'); listItem = doc('#list'); }; // build and insert table/grid let userInputColumn, userInputRow; function buildGrid(e){ let col = "".repeat(userInputColumn.value); let row = `${col}`.repeat(userInputRow.value); let table = `${row}

`; doc('#list').innerHTML = null; doc("#grid").innerHTML = table; dispBtn(['none','block']); fillTable(); enumerate(); } // add id and/or place holder for each element function fillTable(){ let tableRow = doc('.row',true); let children; tableRow.forEach((row,i)=>{ children = Array.from(row.children); children.forEach((child,i2)=>{ child.setAttribute('id',`r${i}c${i2}`); child.setAttribute('data-row',i); child.setAttribute('data-col',i2); child.innerHTML = `&#${randomData()}`; }); }); } function deleteGrid(){ doc('#grid').innerHTML = null; doc('#list').innerHTML = null; dispBtn(['block','none']); } function dispBtn(d){ let [none,block] = d; doc('.ui').style.display = none; doc('.deldiv').style.display = block; } // What element did i click // function getId(e){ let el = e.target; if(el.tagName==="TD"){ removeColor(); appLogic(el); } } function randomData(){ return Math.floor((Math.random() * 15) + 65); } var cloneCount=0; function appLogic(el,clones){ var arr = []; if(el) clones=[],clones.push(el.id); while(clones.length){ arr.push(el); findClones(el,clones); clones.shift(); } var tag = arr[0].getAttribute('data-subset'); if(arr.length>1&&!aOA.includes(tag)){ aOA.push(tag); cloneCount=aOA.length; //console.log(arr[0].innerText, arr.length); createListing(arr); } } function findClones(center,clones){ let surroundingElments = getSurroundElements(clones[0]); surroundingElments.forEach(item=>{ let isMatch = item!==null? item.innerText===center.innerText&& item.style.backgroundColor!=="silver":false; if(isMatch){ item.style.backgroundColor = "silver"; item.hasAttribute('data-subset')? null: item.setAttribute('data-subset',cloneCount); clones.push(item.id); } }); } function getSurroundElements(elCoord){ let el = doc("#"+elCoord); const moves = [ [0,-1],[-1,-1],[-1,0],[-1,1], [0,1],[1,1],[1,0],[1,-1] ]; return moves.map((step)=>{ let [r,c]=step; let row = Number(el.dataset.row)+r; let col = Number(el.dataset.col)+c; let id = `r${row}c${col}`; let element = doc("#"+id)?doc("#"+id):null ; return element; }); } function removeColor(){ var array = doc('.data',true); array.forEach(item=>item.style.background = "whitesmoke"); } function enumerate(){ var grid = doc('.data',true); var i = 0; var myVar = setInterval(()=>{ i<=grid.length-1? grid[i].click(): clearInterval(myVar); i++; }, 100); } function createListing(arr){ listItem.innerHTML += `

${arr[0].innerText} - ${arr.length-1}

`; }console

[CC]Adjacent Clone Letters