2024-07-20 13:02:52 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Dynamic Grid</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--grid-size: 16; /* Adjust this value for grid size (e.g., 3 for 3x3) */
|
|
|
|
|
--cell-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(calc(var(--grid-size) + 1), var(--cell-size));
|
|
|
|
|
grid-template-rows: repeat(calc(var(--grid-size) + 1), var(--cell-size));
|
|
|
|
|
gap: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cell {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="grid"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const gridSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-size').trim());
|
2024-07-19 19:51:38 -04:00
|
|
|
|
|
|
|
|
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.`);
|
|
|
|
|
}
|
2024-07-20 13:02:52 -04:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
