acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/README.md b/Domains/Frontend/MiniProjects/diwali-celebration-hub/README.md
@@ -0,0 +1,16 @@
+# Diwali-Celebration-Hub
+**Contributor:** Keron Patel
+
+## Description
+An interactive web project where users can **light a virtual Diya**, see **fireworks**, hear **festive sounds**, and generate a **personalized Diwali greeting**.  
+Built with HTML, CSS, and JavaScript to spread Diwali joy 🎇
+
+## Tech Stack
+- HTML  
+- CSS  
+- JavaScript  
+- Canvas API (for fireworks animation)
+
+## How to Run  
+1. Open the `index.html` file in your web browser.  
+2. Click **“Light the Diya”** to celebrate Diwali virtually 🪔
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/index.html b/Domains/Frontend/MiniProjects/diwali-celebration-hub/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Diwali Celebration Hub 🪔</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header>
+    <h1>✨ Diwali Celebration Hub ✨</h1>
+  </header>
+
+  <section class="main">
+    <div class="diya-container">
+      <div class="diya">
+        <div class="flame"></div>
+      </div>
+      <button id="lightBtn">Light the Diya</button>
+    </div>
+
+    <div class="greeting">
+      <input type="text" id="nameInput" placeholder="Enter your name..." />
+      <button id="makeGreeting">Generate Greeting</button>
+      <p id="greetingText"></p>
+    </div>
+  </section>
+
+  <canvas id="fireworksCanvas"></canvas>
+
+  <!-- multiple festive sounds -->
+  <audio id="aartiSound" src="sounds\1.mp3"></audio>
+  <audio id="firework1" src="sounds\2.mp3"></audio>
+  <audio id="firework2" src="sounds\3.mp3"></audio>
+
+  <footer>
+    <p>Made with ❤️ for Diwali By Keron Patel</p>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/script.js b/Domains/Frontend/MiniProjects/diwali-celebration-hub/script.js
@@ -0,0 +1,125 @@
+// ---------- DOM Elements ----------
+const lightBtn = document.getElementById("lightBtn");
+const flame = document.querySelector(".flame");
+const diya = document.querySelector(".diya");
+const makeGreeting = document.getElementById("makeGreeting");
+const nameInput = document.getElementById("nameInput");
+const greetingText = document.getElementById("greetingText");
+const fireworksCanvas = document.getElementById("fireworksCanvas");
+const ctx = fireworksCanvas.getContext("2d");
+
+// ---------- Sounds ----------
+const aartiSound = document.getElementById("aartiSound");
+const firework1 = document.getElementById("firework1");
+const firework2 = document.getElementById("firework2");
+
+let diyaLit = false;
+let fireworks = [];
+
+fireworksCanvas.width = window.innerWidth;
+fireworksCanvas.height = window.innerHeight;
+
+// ---------- Event Listeners ----------
+lightBtn.addEventListener("click", () => {
+  diyaLit = !diyaLit;
+  flame.style.opacity = diyaLit ? "1" : "0";
+  diya.classList.toggle("diya-lit", diyaLit);
+
+  if (diyaLit) {
+    safePlay(aartiSound);
+    safePlay(firework1);
+    safePlay(firework2);
+    startFireworks();
+    lightBtn.textContent = "Extinguish";
+  } else {
+    aartiSound.pause();
+    firework1.pause();
+    firework2.pause();
+    aartiSound.currentTime = 0;
+    firework1.currentTime = 0;
+    firework2.currentTime = 0;
+    fireworks = [];
+    ctx.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
+    lightBtn.textContent = "Light the Diya";
+  }
+});
+
+// Greeting generator
+makeGreeting.addEventListener("click", () => {
+  const name = nameInput.value.trim();
+  if (name) {
+    greetingText.textContent =
+      `🎉 Happy Diwali, ${name}! May your life glow like this Diya 🪔`;
+  } else {
+    greetingText.textContent = "Please enter your name to get your greeting!";
+  }
+});
+
+// ---------- Utility: autoplay-safe play ----------
+function safePlay(audio) {
+  // Play will only work after user interaction; catch errors silently
+  audio.currentTime = 0;
+  const playPromise = audio.play();
+  if (playPromise !== undefined) {
+    playPromise.catch(() => {});
+  }
+}
+
+// ---------- Fireworks Animation ----------
+class Firework {
+  constructor(x, y, color) {
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.particles = [];
+    for (let i = 0; i < 30; i++) {
+      this.particles.push({
+        x: x,
+        y: y,
+        speedX: Math.random() * 6 - 3,
+        speedY: Math.random() * 6 - 3,
+        life: 100 + Math.random() * 30
+      });
+    }
+  }
+  update() {
+    this.particles.forEach(p => {
+      p.x += p.speedX;
+      p.y += p.speedY;
+      p.speedY += 0.05; // gravity
+      p.life -= 2;
+    });
+  }
+  draw() {
+    this.particles.forEach(p => {
+      ctx.fillStyle = this.color;
+      ctx.fillRect(p.x, p.y, 2, 2);
+    });
+  }
+}
+
+function startFireworks() {
+  animate();
+}
+
+function animate() {
+  if (!diyaLit) return;
+  ctx.fillStyle = "rgba(0,0,0,0.2)";
+  ctx.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
+
+  if (Math.random() < 0.05) {
+    const x = Math.random() * fireworksCanvas.width;
+    const y = Math.random() * fireworksCanvas.height / 2;
+    const colors = ["red", "gold", "blue", "purple", "orange", "lime"];
+    fireworks.push(new Firework(x, y, colors[Math.floor(Math.random() * colors.length)]));
+    safePlay(firework1);
+  }
+
+  fireworks.forEach(f => {
+    f.update();
+    f.draw();
+  });
+
+  fireworks = fireworks.filter(f => f.particles.some(p => p.life > 0));
+  requestAnimationFrame(animate);
+}
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/1.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/1.mp3
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/2.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/2.mp3
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/3.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/3.mp3
diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/style.css b/Domains/Frontend/MiniProjects/diwali-celebration-hub/style.css
@@ -0,0 +1,105 @@
+body {
+  background: linear-gradient(270deg, #0a0a0a, #220303, #0a0a0a);
+  background-size: 600% 600%;
+  animation: bgShine 10s ease infinite;
+  color: gold;
+  font-family: 'Poppins', sans-serif;
+  margin: 0;
+  overflow: hidden;
+  text-align: center;
+}
+@keyframes bgShine {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+header {
+  padding: 20px;
+  font-size: 1.8em;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.diya-container {
+  margin-top: 30px;
+}
+
+.diya {
+  width: 120px;
+  height: 60px;
+  background: brown;
+  border-radius: 60px 60px 20px 20px;
+  position: relative;
+  margin: 0 auto;
+  box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3);
+}
+
+.diya-lit {
+  box-shadow: 0 0 40px 10px gold;
+  transition: 0.3s;
+}
+
+.flame {
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 40px;
+  background: radial-gradient(ellipse at center, yellow, orange, red);
+  border-radius: 50% 50% 50% 50%;
+  opacity: 0;
+  animation: flicker 0.15s infinite alternate;
+}
+
+@keyframes flicker {
+  from { transform: translateX(-50%) scaleY(1); opacity: 0.8; }
+  to { transform: translateX(-50%) scaleY(1.2); opacity: 1; }
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  background: gold;
+  cursor: pointer;
+  font-size: 16px;
+  transition: 0.2s;
+}
+button:hover { transform: scale(1.05); background: orange; }
+
+.greeting { margin: 50px 0; }
+.greeting input {
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 4px;
+  border: 1px solid gold;
+  background-color: #111;
+  color: gold;
+}
+#greetingText {
+  margin-top: 20px;
+  font-size: 1.4em;
+  text-shadow: 0 0 6px gold;
+}
+
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+footer {
+  position: fixed;
+  bottom: 10px;
+  width: 100%;
+  font-size: 0.9em;
+}