Add touch start event listener for mobile/tablet users

KyleA99 · Nov 4, 2023 · cf20a5a · cf20a5a
1 parent 5ed7e60
commit cf20a5a
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/js/createGrid.js b/js/createGrid.js
@@ -17,10 +17,19 @@ export const createGrid = (gridContainer, gridSize) => {
 
         let colorIntensity = 0;
 
-        gridTile.addEventListener("mouseenter", (event) => {
+        // Add "mouseenter" event listener for desktop
+        gridTile.addEventListener("mouseenter", () => {
             colorIntensity += 10;
             const darkenedColor = darkenColor([128, 128, 128], colorIntensity);
-            event.target.style.backgroundColor = darkenedColor;
+            gridTile.style.backgroundColor = darkenedColor;
+        });
+
+        // Add "touchstart" event listener for mobile/tablet (No mouse to enter grid)
+        gridTile.addEventListener("touchstart", (event) => {
+            event.preventDefault();
+            colorIntensity += 10;
+            const darkenedColor = darkenColor([128, 128, 128], colorIntensity);
+            gridTile.style.backgroundColor = darkenedColor;
         });
 
         gridContainer.appendChild(gridTile);