diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/README.md b/Domains/Frontend/MiniProjects/diwali-celebration-hub/README.md new file mode 100644 index 00000000..ebe35d7f --- /dev/null +++ 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 new file mode 100644 index 00000000..609c9448 --- /dev/null +++ b/Domains/Frontend/MiniProjects/diwali-celebration-hub/index.html @@ -0,0 +1,42 @@ + + + + + + Diwali Celebration Hub 🪔 + + + +
+

✨ Diwali Celebration Hub ✨

+
+ +
+
+
+
+
+ +
+ +
+ + +

+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/script.js b/Domains/Frontend/MiniProjects/diwali-celebration-hub/script.js new file mode 100644 index 00000000..96651caa --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/1.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/1.mp3 new file mode 100644 index 00000000..2c5e46a0 Binary files /dev/null and b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/1.mp3 differ diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/2.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/2.mp3 new file mode 100644 index 00000000..5a71d002 Binary files /dev/null and b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/2.mp3 differ diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/3.mp3 b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/3.mp3 new file mode 100644 index 00000000..f9bcda9f Binary files /dev/null and b/Domains/Frontend/MiniProjects/diwali-celebration-hub/sounds/3.mp3 differ diff --git a/Domains/Frontend/MiniProjects/diwali-celebration-hub/style.css b/Domains/Frontend/MiniProjects/diwali-celebration-hub/style.css new file mode 100644 index 00000000..94e988c7 --- /dev/null +++ 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; +} \ No newline at end of file