300 SUBSCRIBERS COMPLETE

hoverboard/script.js

@@ -1,6 +1,6 @@
 const container = document.getElementById('container')
 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
-const SQUARES = 500
+const SQUARES = 9900
 
 for(let i = 0; i < SQUARES; i++) {
     const square = document.createElement('div')
@@ -10,6 +10,14 @@ for(let i = 0; i < SQUARES; i++) {
 
     square.addEventListener('mouseout', () => removeColor(square))
 
+    square.addEventListener('mouseover',(details)=>{
+        square.classList.add('size')
+    })
+
+    square.addEventListener('mouseout',(details)=>{
+        square.classList.remove('size')
+    })
+
     container.appendChild(square)
 }
 

hoverboard/style.css

@@ -4,9 +4,6 @@
 
 body {
   background-color: #111;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   height: 100vh;
   overflow: hidden;
   margin: 0;
@@ -17,7 +14,6 @@ body {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 400px;
 }
 
 .square {
@@ -29,6 +25,13 @@ body {
   transition: 2s ease;
 }
 
+.size{
+  height: 20px !important;
+  width: 20px !important;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
 .square:hover {
   transition-duration: 0s;
 }