diff --git a/index.html b/index.html index 9ec461e..e02de6c 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,8 @@

Sketchpad

+
+ +
\ No newline at end of file diff --git a/script.js b/script.js index e69de29..7c52496 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,21 @@ +const container = document.querySelector("#container"); + +for (let i = 0; i < 16; i++) { + let flexbox = document.createElement("div"); + flexbox.classList.add("flexbox"); + for (let j = 0; j < 16; j++) { + let div = document.createElement('div'); + div.classList.add("griddy"); + flexbox.appendChild(div); + } + container.appendChild(flexbox); +} + +let griddies = document.querySelectorAll(".griddy"); +griddies.forEach(griddy => { + griddy.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"}); + griddy.addEventListener("mouseout", (event) => { + setTimeout(() => event.target.style.backgroundColor = "#fff", 1000); + + }); +}) diff --git a/style.css b/style.css index e69de29..a9e066c 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,15 @@ +#container { + width: 600px; + border: 1px solid #000; +} + +.flexbox { + display: flex; +} + +.griddy { + border: 1px solid #000; + /* padding: 10px; */ + flex: 1; + aspect-ratio: 1 / 1; +} \ No newline at end of file