69 lines
No EOL
2.5 KiB
JavaScript
69 lines
No EOL
2.5 KiB
JavaScript
const container = document.querySelector("#container");
|
|
|
|
/* header */
|
|
const header = document.createElement('h1');
|
|
header.textContent = "Etch-a-sketch";
|
|
header.setAttribute('style', 'padding: 10px;');
|
|
container.appendChild(header);
|
|
|
|
/* button to change grid dimensions */
|
|
const dimensionChanger = document.createElement('button');
|
|
dimensionChanger.textContent = "Change grid size";
|
|
dimensionChanger.setAttribute('style', 'margin-bottom: 15px; margin-right: 20px;');
|
|
container.appendChild(dimensionChanger);
|
|
dimensionChanger.onclick = () => {
|
|
/* get user inputs */
|
|
let input = prompt("Enter the number of squares per side for new grid");
|
|
makeGrid(parseInt(input), parseInt(input));
|
|
}
|
|
|
|
/* reset button */
|
|
const resetButton = document.createElement('button');
|
|
resetButton.textContent = "Reset";
|
|
container.appendChild(resetButton);
|
|
resetButton.onclick = () => location.reload();
|
|
|
|
/* make grid container */
|
|
const gridContainer = document.createElement('div');
|
|
gridContainer.setAttribute("id", "griddiv");
|
|
container.appendChild(gridContainer);
|
|
|
|
/* make each cell 10% darker on mouseover */
|
|
function darkenCell() {
|
|
/* get current rgba of cell */
|
|
currentValue = getComputedStyle(this).getPropertyValue("background-color");
|
|
/* regex match for number values only */
|
|
const values = currentValue.match(/[\d.]+/g);
|
|
/* CSS doesn't output an alpha value of 1 but rather removes the alpha value entirely at 1.
|
|
do nothing if there is no alpha value (only three digits declared in rgba) */
|
|
if (values.length === 3) {
|
|
return;
|
|
}
|
|
else {
|
|
/* assigns newAlpha variable to sum of old transparency
|
|
number and 0.1 (10% darker) */
|
|
const newAlpha = parseFloat(values[3]) + 0.1;
|
|
/* increments cell color */
|
|
this.style.backgroundColor = 'rgba(0, 0, 0, ' + newAlpha + ')';
|
|
}
|
|
}
|
|
|
|
function makeGrid(rows, cols) {
|
|
/* wipe existing divs */
|
|
while(gridContainer.firstChild) {
|
|
gridContainer.removeChild(gridContainer.firstChild);
|
|
}
|
|
/* assign global CSS vars to ones passed by user */
|
|
gridContainer.style.setProperty('--grid-rows', rows);
|
|
gridContainer.style.setProperty('--grid-cols', cols);
|
|
/* make the cells */
|
|
for (i = 0; i < (rows * cols); i++) {
|
|
let cell = document.createElement("div");
|
|
gridContainer.appendChild(cell).className = "grid-item";
|
|
/* add listeners for mouseover */
|
|
cell.addEventListener('mouseover', darkenCell);
|
|
};
|
|
};
|
|
|
|
/* initialize to a default of 16x16 grid */
|
|
makeGrid(16, 16); |