Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add event listeners to each grid item

Browse source
This commit is contained in:
lolabird 2023-11-09 18:20:28 -07:00
commit ad87353175
1 changed files with 25 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

37
script.js
View file

@ -1,11 +1,14 @@
function createGrid(num) {
const container = document.querySelector(".container");
const conWidth = container.clientWidth;
const conHeight = container.clientHeight
const grid = document.createElement("div");
const gridArea = num ** 2;
const gridWidth = conWidth / num;
const gridHeight = conHeight / num;
let numGrid = 16; //will use this later to prompt user
//need to figure out the wrapping issue
const container = document.querySelector(".container");
const conWidth = container.clientWidth;
const conHeight = container.clientHeight
const grid = document.createElement("div");
function createGrid() {
const gridArea = numGrid ** 2;
const gridWidth = conWidth / numGrid;
const gridHeight = conHeight / numGrid;
grid.classList.add("grid");
grid.style.width = gridWidth + 'px';
@ -14,10 +17,22 @@ function createGrid(num) {
for (let i = 0; i < gridArea; i++){
container.appendChild(grid.cloneNode(true));
}
const gridItems = document.querySelectorAll(".grid");
gridItems.forEach((item) => {
item.addEventListener("mouseover", () => {
console.log("Sup!");
});
});
}
let numGrid = 16; //will use this later to prompt user
createGrid(numGrid);
function colorGrid() {
container.style.background = "blue";
}
createGrid();