Added hoverboard

iamrahulmahato · Nov 10, 2024 · 01d6f9f · 01d6f9f
1 parent e15a0cc
commit 01d6f9f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/projects/hoverboard/index.html b/projects/hoverboard/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Hoverboard</title>
+  </head>
+  <body>
+    <div class="container" id="container"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/projects/hoverboard/script.js b/projects/hoverboard/script.js
@@ -0,0 +1,29 @@
+const container = document.getElementById('container')
+const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
+const SQUARES = 500
+
+for(let i = 0; i < SQUARES; i++) {
+    const square = document.createElement('div')
+    square.classList.add('square')
+
+    square.addEventListener('mouseover', () => setColor(square))
+
+    square.addEventListener('mouseout', () => removeColor(square))
+
+    container.appendChild(square)
+}
+
+function setColor(element) {
+   const color = getRandomColor()
+   element.style.background = color
+   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
+}
+
+function removeColor(element) {
+   element.style.background = '#1d1d1d'
+   element.style.boxShadow = '0 0 2px #000'
+}
+
+function getRandomColor() {
+    return colors[Math.floor(Math.random() * colors.length)]
+}
diff --git a/projects/hoverboard/style.css b/projects/hoverboard/style.css
@@ -0,0 +1,34 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #111;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 400px;
+}
+
+.square {
+  background-color: #1d1d1d;
+  box-shadow: 0 0 2px #000;
+  height: 16px;
+  width: 16px;
+  margin: 2px;
+  transition: 2s ease;
+}
+
+.square:hover {
+  transition-duration: 0s;
+}