58 lines
2.3 KiB
JavaScript
58 lines
2.3 KiB
JavaScript
const gridSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-size').trim());
|
|
|
|
const grid = document.querySelector('.grid');
|
|
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
|
|
// Create top labels
|
|
grid.innerHTML += '<div class="label"></div>'; // Empty top-left corner
|
|
for (let i = 0; i < gridSize; i++) {
|
|
grid.innerHTML += `<div class="label">${alphabet[i]}</div>`;
|
|
}
|
|
|
|
// Create rows with side labels and cells
|
|
for (let i = 1; i <= gridSize; i++) {
|
|
grid.innerHTML += `<div class="label">${i}</div>`;
|
|
for (let j = 0; j < gridSize; j++) {
|
|
let cellName = `${alphabet[j]}${i}`; // This will generate names like A1, A2, B1, etc.
|
|
grid.innerHTML += `<div class="cell ${cellName}"></div>`;
|
|
}
|
|
}
|
|
|
|
function colorCell(cellName, colorName) {
|
|
// Map of valid named colors to their hex values
|
|
const validColors = {
|
|
"white": "#FFFFFF",
|
|
"lightGray": "#E4E4E4",
|
|
"mediumGray": "#888888",
|
|
"darkGray": "#222222",
|
|
"pink": "#FFA7D1",
|
|
"red": "#E50000",
|
|
"orange": "#E59500",
|
|
"brown": "#A06A42",
|
|
"yellow": "#E5D900",
|
|
"lightGreen": "#94E044",
|
|
"green": "#02BE01",
|
|
"cyan": "#00D3DD",
|
|
"blue": "#0083C7",
|
|
"darkBlue": "#0000EA",
|
|
"purple": "#CF6EE4",
|
|
"darkPurple": "#820080",
|
|
"black": "#000000"
|
|
};
|
|
|
|
// Check if the provided color name is valid
|
|
if (!validColors[colorName]) {
|
|
console.warn(`Invalid color name: ${colorName}. Please use a valid named color.`);
|
|
return;
|
|
}
|
|
|
|
// Find the cell using its class name
|
|
const cell = document.querySelector(`.cell.${cellName}`);
|
|
|
|
// If the cell exists, change its background color to the corresponding hex value
|
|
if (cell) {
|
|
cell.style.backgroundColor = validColors[colorName];
|
|
} else {
|
|
console.warn(`Cell ${cellName} not found.`);
|
|
}
|
|
} |