Added paint space, painting on hover

After 1 second the block goes white again
2024-01-09 20:07:08 +01:00 · 2024-01-09 20:07:08 +01:00 · e6435e500e
parent 191d4bb049
commit e6435e500e
3 changed files with 39 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -9,5 +9,8 @@
 </head>
 <body>
    <h1>Sketchpad</h1>
+    <div id="container">
+        
+    </div>
 </body>
 </html>
--- 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);
+        
+    });
+})
--- 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;
+}