Block color now in class instead of modifying inline style

script.js

@@ -14,9 +14,13 @@ function createGrid(size) {
     
     let blocks = document.querySelectorAll(".block");
     blocks.forEach(block => {
-        block.addEventListener("mouseover", (event) => {event.target.style.backgroundColor = "#000"});
+        block.addEventListener("mouseover", (event) => {
+            event.target.classList.add("colored")
+        });
         block.addEventListener("mouseout", (event) => {
-            setTimeout(() => event.target.style.backgroundColor = "#fff", 1 * 1000);
+            setTimeout(() => {
+                event.target.classList.remove("colored");
+            }, 1 * 1000);
         });
     })
 }

style.css

@@ -13,3 +13,7 @@
     flex: 1;
     aspect-ratio: 1 / 1;
 }
+
+.colored {
+    background-color: #000;
+}