From e6435e500eed6a42b2031deb68451ae2a2319e8e Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Tue, 9 Jan 2024 20:07:08 +0100 Subject: [PATCH] Added paint space, painting on hover After 1 second the block goes white again --- index.html | 3 +++ script.js | 21 +++++++++++++++++++++ style.css | 15 +++++++++++++++ 3 files changed, 39 insertions(+) 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