From 387cd955283e47f4e985a5cd4f4e7e8a70ce6697 Mon Sep 17 00:00:00 2001
From: anuj <anujkashyap@email.com>
Date: Sat, 1 Feb 2025 01:24:07 -0800
Subject: [PATCH] 300 SUBSCRIBERS COMPLETE

---
 hoverboard/script.js | 10 +++++++++-
 hoverboard/style.css | 11 +++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/hoverboard/script.js b/hoverboard/script.js
index d888c8b..50020f5 100644
--- a/hoverboard/script.js
+++ b/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)
 }
 
diff --git a/hoverboard/style.css b/hoverboard/style.css
index 1283d2e..d9d2df6 100644
--- a/hoverboard/style.css
+++ b/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;
 }