function colorCell(cellName, hexValue) { console.log(`colorCell called with: ${cellName}, ${hexValue}`); // Find the cell using its class name const cell = document.querySelector(`.cell.${cellName}`); // If the cell exists, change its background color to the provided hex value if (cell) { cell.style.backgroundColor = hexValue; } else { console.warn(`Cell ${cellName} not found.`); } } // Attach colorCell function to the window object to make it globally accessible window.colorCell = colorCell; document.addEventListener('DOMContentLoaded', function() { const gridSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-size').trim()); const grid = document.querySelector('.grid-container'); function getLabel(index) { let label = ''; while (index >= 0) { label = String.fromCharCode((index % 26) + 65) + label; index = Math.floor(index / 26) - 1; } return label; } // Create top labels grid.innerHTML += '
'; // Empty top-left corner for (let i = 0; i < gridSize; i++) { grid.innerHTML += `