diff --git a/public/Hangman/index.html b/public/Hangman/index.html new file mode 100644 index 00000000..05208058 --- /dev/null +++ b/public/Hangman/index.html @@ -0,0 +1,43 @@ + + + + + + Hangman Game + + + + + +
+
+

Hangman 🕹️

+

Guess the word and save the hangman!

+
+
+ +
+
+ + +
+
+ +
+
+ Wrong guesses: +
+
+
+ +
+ +
+ +
+ + + diff --git a/public/Hangman/script.js b/public/Hangman/script.js new file mode 100644 index 00000000..2869fac0 --- /dev/null +++ b/public/Hangman/script.js @@ -0,0 +1,361 @@ +// Hangman Game JavaScript +// Clean, well-commented, easy to customize + +const wordList = [ + { word: "elephant", category: "Animal", hint: "Largest land mammal" }, + { word: "giraffe", category: "Animal", hint: "Tallest animal" }, + { word: "kangaroo", category: "Animal", hint: "Jumps and has a pouch" }, + { word: "dolphin", category: "Animal", hint: "Intelligent sea mammal" }, + { + word: "penguin", + category: "Animal", + hint: "Bird that can't fly, lives in cold", + }, + { word: "rhinoceros", category: "Animal", hint: "Has a horn on its nose" }, + { + word: "alligator", + category: "Animal", + hint: "Large reptile, lives in water", + }, + { word: "cheetah", category: "Animal", hint: "Fastest land animal" }, + { word: "squirrel", category: "Animal", hint: "Loves nuts, bushy tail" }, + { word: "ostrich", category: "Animal", hint: "Largest bird, can't fly" }, + { + word: "pineapple", + category: "Fruit", + hint: "Tropical fruit, spiky outside", + }, + { + word: "strawberry", + category: "Fruit", + hint: "Red fruit with seeds outside", + }, + { + word: "watermelon", + category: "Fruit", + hint: "Big green fruit, red inside", + }, + { + word: "blueberry", + category: "Fruit", + hint: "Small blue fruit, used in muffins", + }, + { word: "mango", category: "Fruit", hint: "King of fruits in India" }, + { word: "papaya", category: "Fruit", hint: "Orange tropical fruit" }, + { + word: "apricot", + category: "Fruit", + hint: "Small orange fruit, fuzzy skin", + }, + { + word: "coconut", + category: "Fruit", + hint: "Hard shell, white inside, tropical", + }, + { + word: "kiwifruit", + category: "Fruit", + hint: "Brown fuzzy outside, green inside", + }, + { + word: "pomegranate", + category: "Fruit", + hint: "Red fruit, many seeds inside", + }, + { + word: "brazil", + category: "Country", + hint: "Largest country in South America", + }, + { + word: "canada", + category: "Country", + hint: "Second largest country, maple leaf", + }, + { word: "germany", category: "Country", hint: "Country of beer and cars" }, + { + word: "australia", + category: "Country", + hint: "Country and continent, kangaroos", + }, + { word: "sweden", category: "Country", hint: "Scandinavian, IKEA" }, + { word: "egypt", category: "Country", hint: "Pyramids and Nile" }, + { word: "japan", category: "Country", hint: "Land of the rising sun" }, + { + word: "finland", + category: "Country", + hint: "Northern Europe, lots of lakes", + }, + { word: "mexico", category: "Country", hint: "Tacos and sombreros" }, + { + word: "turkey", + category: "Country", + hint: "Country in both Europe and Asia", + }, +]; + +const maxWrong = 6; +let chosenWord = ""; +let chosenCategory = ""; +let chosenHint = ""; +let guessedLetters = []; +let wrongLetters = []; +let gameActive = true; + +const wordArea = document.querySelector(".word-area"); +const wrongLettersDiv = document.getElementById("wrong-letters"); +const keyboardDiv = document.querySelector(".keyboard"); +const restartBtn = document.getElementById("restart-btn"); +const gameMessage = document.getElementById("game-message"); +const hangmanSVG = document.getElementById("hangman-svg"); +const confettiCanvas = document.getElementById("confetti-canvas"); +const hintBtn = document.getElementById("hint-btn"); +const hintText = document.getElementById("hint-text"); + +// Google Fonts loaded via HTML + +// Utility: pick random word object +function pickWordObj() { + return wordList[Math.floor(Math.random() * wordList.length)]; +} + +// Draw hangman step-by-step using SVG +function drawHangman(wrongCount) { + hangmanSVG.innerHTML = ""; + // Base + hangmanSVG.innerHTML += + ''; + // Pole + hangmanSVG.innerHTML += + ''; + hangmanSVG.innerHTML += + ''; + hangmanSVG.innerHTML += + ''; + if (wrongCount > 0) { + // Head + hangmanSVG.innerHTML += + ''; + hangmanSVG.innerHTML += ''; + hangmanSVG.innerHTML += ''; + } + if (wrongCount > 1) { + // Body + hangmanSVG.innerHTML += + ''; + } + if (wrongCount > 2) { + // Left arm + hangmanSVG.innerHTML += + ''; + } + if (wrongCount > 3) { + // Right arm + hangmanSVG.innerHTML += + ''; + } + if (wrongCount > 4) { + // Left leg + hangmanSVG.innerHTML += + ''; + } + if (wrongCount > 5) { + // Right leg + hangmanSVG.innerHTML += + ''; + } + if (!gameActive && wrongCount >= maxWrong) { + // Sad face + hangmanSVG.innerHTML += + ''; + } +} + +// Display word with underscores and reveal letters +function displayWord() { + wordArea.innerHTML = ""; + for (let i = 0; i < chosenWord.length; i++) { + const letter = chosenWord[i]; + const span = document.createElement("span"); + span.classList.add("letter"); + if (letter === " ") { + span.classList.add("space"); + span.textContent = " "; + } else if (guessedLetters.includes(letter)) { + span.textContent = letter.toUpperCase(); + span.classList.add("visible"); + } else { + span.textContent = "_"; + } + wordArea.appendChild(span); + } +} + +// Display wrong guesses +function displayWrongLetters() { + wrongLettersDiv.innerHTML = ""; + wrongLetters.forEach((l) => { + const span = document.createElement("span"); + span.className = "wrong-letter strike"; + span.textContent = l.toUpperCase(); + wrongLettersDiv.appendChild(span); + }); +} + +// Generate on-screen keyboard +function generateKeyboard() { + keyboardDiv.innerHTML = ""; + const letters = "abcdefghijklmnopqrstuvwxyz".split(""); + letters.forEach((l) => { + const btn = document.createElement("button"); + btn.className = "key-btn"; + btn.textContent = l.toUpperCase(); + btn.disabled = + guessedLetters.includes(l) || wrongLetters.includes(l) || !gameActive; + btn.addEventListener("click", () => handleGuess(l)); + keyboardDiv.appendChild(btn); + }); +} + +// Handle guess +function handleGuess(letter) { + if (!gameActive) return; + if (guessedLetters.includes(letter) || wrongLetters.includes(letter)) return; + if (chosenWord.includes(letter)) { + guessedLetters.push(letter); + displayWord(); + checkWin(); + } else { + wrongLetters.push(letter); + drawHangman(wrongLetters.length); + displayWrongLetters(); + checkLose(); + } + generateKeyboard(); +} + +// Check win +function checkWin() { + let won = true; + for (let l of chosenWord) { + if (!guessedLetters.includes(l)) { + won = false; + break; + } + } + if (won) { + gameActive = false; + gameMessage.textContent = "🎉 You Win!"; + showConfetti(); + generateKeyboard(); + } +} + +// Check lose +function checkLose() { + if (wrongLetters.length >= maxWrong) { + gameActive = false; + gameMessage.textContent = `😢 Game Over! Word was: ${chosenWord.toUpperCase()}`; + drawHangman(maxWrong); + generateKeyboard(); + } +} + +// Restart game +function restartGame() { + const wordObj = pickWordObj(); + chosenWord = wordObj.word; + chosenCategory = wordObj.category; + chosenHint = wordObj.hint; + guessedLetters = []; + wrongLetters = []; + gameActive = true; + gameMessage.textContent = ""; + drawHangman(0); + displayWord(); + displayWrongLetters(); + generateKeyboard(); + clearConfetti(); + hintText.textContent = ""; + hintText.classList.remove("visible"); + hintBtn.disabled = false; +} + +restartBtn.addEventListener("click", () => { + restartBtn.classList.add("rotating"); + setTimeout(() => restartBtn.classList.remove("rotating"), 600); + restartGame(); +}); + +// Hint button logic +hintBtn.addEventListener("click", () => { + hintText.textContent = `${chosenCategory} Hint: ${chosenHint}`; + hintText.classList.add("visible"); + hintBtn.disabled = true; +}); + +// Confetti animation +function showConfetti() { + const ctx = confettiCanvas.getContext("2d"); + confettiCanvas.width = window.innerWidth; + confettiCanvas.height = window.innerHeight; + let confetti = []; + for (let i = 0; i < 80; i++) { + confetti.push({ + x: Math.random() * confettiCanvas.width, + y: Math.random() * -confettiCanvas.height, + r: Math.random() * 8 + 4, + d: Math.random() * 2 + 1, + color: `hsl(${Math.random() * 360},80%,80%)`, + }); + } + let frame = 0; + function animate() { + ctx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height); + confetti.forEach((c) => { + ctx.beginPath(); + ctx.arc(c.x, c.y, c.r, 0, 2 * Math.PI); + ctx.fillStyle = c.color; + ctx.fill(); + c.y += c.d + Math.sin(frame / 10 + c.x / 50) * 2; + c.x += Math.sin(frame / 10 + c.y / 50) * 2; + if (c.y > confettiCanvas.height) c.y = -10; + }); + frame++; + if (!gameActive) requestAnimationFrame(animate); + } + animate(); +} +function clearConfetti() { + confettiCanvas.width = 0; + confettiCanvas.height = 0; +} + +// Responsive confetti canvas +window.addEventListener("resize", () => { + if (!gameActive) showConfetti(); +}); + +// Start game on load +window.onload = restartGame; + +// Touch support for mobile +keyboardDiv.addEventListener("touchstart", function (e) { + if (e.target.classList.contains("key-btn")) { + e.target.click(); + } +}); + +// Optional: allow physical keyboard input +window.addEventListener("keydown", function (e) { + if (!gameActive) return; + const letter = e.key.toLowerCase(); + if (/^[a-z]$/.test(letter)) { + handleGuess(letter); + } +}); + +// Fun restart button animation +const style = document.createElement("style"); +style.innerHTML = `.restart-btn.rotating { animation: rotateRestart 0.6s; } @keyframes rotateRestart { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`; +document.head.appendChild(style); diff --git a/public/Hangman/style.css b/public/Hangman/style.css new file mode 100644 index 00000000..8777bba3 --- /dev/null +++ b/public/Hangman/style.css @@ -0,0 +1,311 @@ +body { + background: linear-gradient(120deg, #e0c3fc 0%, #f7d9e3 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} +.glass-card { + background: rgba(255, 255, 255, 0.7); + border-radius: 32px; + box-shadow: 0 8px 32px rgba(160, 160, 255, 0.18), 0 0 0 8px #f7d9e3; + backdrop-filter: blur(8px); + padding: 40px 24px 32px 24px; + max-width: 420px; + width: 100%; + text-align: center; + margin: 32px auto; + overflow: hidden; + position: relative; + z-index: 2; +} +.hangman-header { + margin-bottom: 10px; +} +.title { + font-family: "Baloo 2", cursive; + font-size: 2.6rem; + color: #a084e8; + margin-bottom: 0px; + letter-spacing: 2px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} +.emoji { + font-size: 2rem; + vertical-align: middle; +} +.subtitle { + font-size: 1.1rem; + color: #6f61c0; + margin-bottom: 8px; + font-family: "Quicksand", cursive; +} +.hint-row { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + margin-bottom: 10px; +} +.hint-btn { + background: linear-gradient(135deg, #f7d9e3 0%, #c1e1c1 100%); + border: none; + border-radius: 16px; + font-size: 1rem; + color: #6f61c0; + padding: 8px 18px; + cursor: pointer; + box-shadow: 0 2px 8px rgba(160, 160, 255, 0.08); + transition: transform 0.15s, background 0.2s; +} +.hint-btn:hover { + background: linear-gradient(135deg, #e0c3fc 0%, #f7d9e3 100%); + transform: scale(1.08); +} +.hint-btn:active { + background: #b6b6f7; + transform: scale(0.95); +} +.hint-text { + font-size: 1.1rem; + color: #ff6f91; + font-family: "Quicksand", cursive; + opacity: 0; + transition: opacity 0.4s; + margin-left: 6px; +} +.hint-text.visible { + opacity: 1; + animation: fadeInHint 0.5s; +} +@keyframes fadeInHint { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +/* Hangman Game CSS - Modern, playful, pastel theme */ +body { + margin: 0; + padding: 0; + font-family: "Quicksand", "Baloo 2", cursive, sans-serif; + background: linear-gradient(135deg, #f8fafc 0%, #e0c3fc 100%); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +/* .container replaced by .glass-card */ +.title { + font-family: "Baloo 2", cursive; + font-size: 2.8rem; + color: #a084e8; + margin-bottom: 16px; + letter-spacing: 2px; + animation: bounceTitle 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1; +} +@keyframes bounceTitle { + 0% { + transform: scale(0.7) translateY(-60px); + opacity: 0; + } + 60% { + transform: scale(1.2) translateY(10px); + opacity: 1; + } + 100% { + transform: scale(1) translateY(0); + } +} +.hangman-area { + margin: 16px 0 24px 0; + height: 250px; + display: flex; + align-items: center; + justify-content: center; +} +.word-area { + font-size: 2rem; + letter-spacing: 12px; + margin-bottom: 18px; + min-height: 48px; + color: #6f61c0; + display: flex; + justify-content: center; +} +/* Improved underline and interactivity for word letters */ +.word-area .letter { + opacity: 0; + transition: opacity 0.4s ease; + font-weight: bold; + border-bottom: 3px solid #a084e8; + margin: 0 8px; + min-width: 32px; + text-align: center; + font-size: 2.2rem; + background: linear-gradient(90deg, #f7d9e3 0%, #e0c3fc 100%); + border-radius: 8px 8px 24px 24px; + box-shadow: 0 2px 8px rgba(160, 160, 255, 0.08); + position: relative; +} +.word-area .letter.visible { + opacity: 1; + animation: fadeInLetter 0.5s; + color: #6f61c0; +} +.word-area .letter.space { + border-bottom: none; + background: none; + min-width: 18px; + box-shadow: none; +} +@keyframes fadeInLetter { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.wrong-guesses { + margin-bottom: 16px; + color: #ff6f91; + font-size: 1.1rem; +} +#wrong-letters { + margin-top: 6px; + min-height: 24px; +} +.wrong-letter { + display: inline-block; + margin: 0 6px; + position: relative; + color: #ff6f91; + font-weight: bold; + font-size: 1.2rem; + opacity: 0; + animation: fadeInWrong 0.5s forwards; +} +.wrong-letter.strike { + text-decoration: line-through; + text-decoration-thickness: 3px; + text-decoration-color: #ff1744; + animation: strikeWrong 0.5s; +} +@keyframes fadeInWrong { + from { + opacity: 0; + transform: scale(0.7); + } + to { + opacity: 1; + transform: scale(1); + } +} +@keyframes strikeWrong { + 0% { + text-decoration-thickness: 0; + } + 100% { + text-decoration-thickness: 3px; + } +} +.keyboard { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + margin-bottom: 18px; +} +.key-btn { + background: linear-gradient(135deg, #f7d9e3 0%, #c1e1c1 100%); + border: none; + border-radius: 12px; + font-size: 1.1rem; + color: #6f61c0; + padding: 10px 16px; + margin: 2px; + cursor: pointer; + box-shadow: 0 2px 8px rgba(160, 160, 255, 0.08); + transition: transform 0.15s, background 0.2s; +} +.key-btn:hover { + background: linear-gradient(135deg, #e0c3fc 0%, #f7d9e3 100%); + transform: scale(1.08); +} +.key-btn:active { + background: #b6b6f7; + transform: scale(0.95); +} +.key-btn:disabled { + background: #e0e0e0; + color: #b6b6b6; + cursor: not-allowed; +} +/* Improved restart button style */ +.restart-btn { + background: linear-gradient(135deg, #a084e8 0%, #f7d9e3 100%); + color: #fff; + border: none; + border-radius: 32px; + font-size: 1.2rem; + padding: 14px 36px; + margin-top: 16px; + cursor: pointer; + box-shadow: 0 2px 12px rgba(160, 160, 255, 0.12); + transition: transform 0.2s, box-shadow 0.2s; + animation: pulseRestart 1.2s infinite alternate; +} +@keyframes pulseRestart { + 0% { + transform: scale(1) rotate(0deg); + } + 60% { + transform: scale(1.08) rotate(10deg); + } + 100% { + transform: scale(1) rotate(-10deg); + } +} +.game-message { + font-size: 1.5rem; + margin-top: 18px; + min-height: 32px; + color: #6f61c0; + font-family: "Baloo 2", cursive; +} +.confetti-canvas { + position: absolute; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: 10; +} +@media (max-width: 600px) { + .container { + max-width: 98vw; + padding: 16px 4px; + } + .title { + font-size: 2rem; + } + .word-area { + font-size: 1.3rem; + letter-spacing: 6px; + } + .hangman-area { + height: 180px; + } + .restart-btn { + font-size: 1rem; + padding: 10px 18px; + } +} diff --git a/scripts/app.js b/scripts/app.js index a1309f4d..5277a068 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -2,10 +2,10 @@ class WebDev100Days { constructor() { this.projects = []; this.filteredProjects = []; - this.currentFilter = 'all'; + this.currentFilter = "all"; this.currentPage = 1; this.projectsPerPage = 20; - this.searchTerm = ''; + this.searchTerm = ""; this.init(); } @@ -22,31 +22,34 @@ class WebDev100Days { } setupEventListeners() { - const searchInput = document.getElementById('searchInput'); - const searchButton = document.getElementById('searchButton'); + const searchInput = document.getElementById("searchInput"); + const searchButton = document.getElementById("searchButton"); if (searchInput) { - searchInput.addEventListener('input', this.debounce(() => { - this.searchTerm = searchInput.value.toLowerCase(); - this.filterProjects(); - }, 300)); + searchInput.addEventListener( + "input", + this.debounce(() => { + this.searchTerm = searchInput.value.toLowerCase(); + this.filterProjects(); + }, 300) + ); } if (searchButton) { - searchButton.addEventListener('click', () => { + searchButton.addEventListener("click", () => { this.searchTerm = searchInput.value.toLowerCase(); this.filterProjects(); }); } - document.addEventListener('click', (e) => { - if (e.target.matches('.filter-tab')) { + document.addEventListener("click", (e) => { + if (e.target.matches(".filter-tab")) { this.setActiveFilter(e.target.dataset.filter); } }); - document.addEventListener('click', (e) => { - if (e.target.matches('.pagination-btn')) { + document.addEventListener("click", (e) => { + if (e.target.matches(".pagination-btn")) { const page = parseInt(e.target.dataset.page); if (page && page !== this.currentPage) { this.currentPage = page; @@ -67,30 +70,30 @@ class WebDev100Days { } }); - document.addEventListener('click', (e) => { - if (e.target.matches('.demo-btn') || e.target.closest('.demo-btn')) { + document.addEventListener("click", (e) => { + if (e.target.matches(".demo-btn") || e.target.closest(".demo-btn")) { e.preventDefault(); - const demoBtn = e.target.closest('.demo-btn'); + const demoBtn = e.target.closest(".demo-btn"); if (demoBtn && demoBtn.href) { - window.open(demoBtn.href, '_blank'); + window.open(demoBtn.href, "_blank"); } } }); } setupThemeToggle() { - const themeToggle = document.querySelector('.theme-toggle'); - const currentTheme = localStorage.getItem('theme') || 'light'; + const themeToggle = document.querySelector(".theme-toggle"); + const currentTheme = localStorage.getItem("theme") || "light"; - document.documentElement.setAttribute('data-theme', currentTheme); + document.documentElement.setAttribute("data-theme", currentTheme); if (themeToggle) { - themeToggle.addEventListener('click', () => { - const current = document.documentElement.getAttribute('data-theme'); - const next = current === 'dark' ? 'light' : 'dark'; + themeToggle.addEventListener("click", () => { + const current = document.documentElement.getAttribute("data-theme"); + const next = current === "dark" ? "light" : "dark"; - document.documentElement.setAttribute('data-theme', next); - localStorage.setItem('theme', next); + document.documentElement.setAttribute("data-theme", next); + localStorage.setItem("theme", next); this.updateThemeIcon(next); }); @@ -100,58 +103,65 @@ class WebDev100Days { } updateThemeIcon(theme) { - const themeToggle = document.querySelector('.theme-toggle'); + const themeToggle = document.querySelector(".theme-toggle"); if (themeToggle) { - themeToggle.innerHTML = theme === 'dark' - ? '' - : ''; + themeToggle.innerHTML = + theme === "dark" + ? '' + : ''; } } setupScrollProgress() { - const progressBar = document.querySelector('.scroll-progress-bar'); + const progressBar = document.querySelector(".scroll-progress-bar"); if (progressBar) { - window.addEventListener('scroll', () => { - const scrolled = (window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100; + window.addEventListener("scroll", () => { + const scrolled = + (window.pageYOffset / + (document.documentElement.scrollHeight - window.innerHeight)) * + 100; progressBar.style.width = `${scrolled}%`; }); } } setupScrollToTop() { - const scrollBtn = document.querySelector('.scroll-top'); + const scrollBtn = document.querySelector(".scroll-top"); if (scrollBtn) { - window.addEventListener('scroll', () => { + window.addEventListener("scroll", () => { if (window.pageYOffset > 300) { - scrollBtn.classList.add('visible'); + scrollBtn.classList.add("visible"); } else { - scrollBtn.classList.remove('visible'); + scrollBtn.classList.remove("visible"); } }); - scrollBtn.addEventListener('click', () => { + scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, - behavior: 'smooth' + behavior: "smooth", }); }); } } setupMobileMenu() { - const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); - const mobileNav = document.querySelector('.mobile-nav'); + const mobileMenuBtn = document.querySelector(".mobile-menu-btn"); + const mobileNav = document.querySelector(".mobile-nav"); if (mobileMenuBtn && mobileNav) { - mobileMenuBtn.addEventListener('click', () => { - mobileMenuBtn.classList.toggle('active'); - mobileNav.classList.toggle('active'); + mobileMenuBtn.addEventListener("click", () => { + mobileMenuBtn.classList.toggle("active"); + mobileNav.classList.toggle("active"); }); - document.addEventListener('click', (e) => { - if (!mobileMenuBtn.contains(e.target) && !mobileNav.contains(e.target)) { - mobileMenuBtn.classList.remove('active'); - mobileNav.classList.remove('active'); + document.addEventListener("click", (e) => { + if ( + !mobileMenuBtn.contains(e.target) && + !mobileNav.contains(e.target) + ) { + mobileMenuBtn.classList.remove("active"); + mobileNav.classList.remove("active"); } }); } @@ -162,173 +172,204 @@ class WebDev100Days { { originalDay: 1, name: "Todo List", - description: "A simple and elegant todo list application with local storage support.", + description: + "A simple and elegant todo list application with local storage support.", demoLink: "./public/Day-1_TodoList/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Add/Remove Tasks", "Mark Complete", "Local Storage"] + features: ["Add/Remove Tasks", "Mark Complete", "Local Storage"], }, { originalDay: 2, name: "Digital Clock", - description: "A beautiful digital clock with customizable themes and formats.", + description: + "A beautiful digital clock with customizable themes and formats.", demoLink: "./public/Day-2_digital_clock/digitalclock.html", category: "basic", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Real-time Updates", "Multiple Formats", "Theme Options"] + features: ["Real-time Updates", "Multiple Formats", "Theme Options"], }, { originalDay: 3, name: "ASCII Art Generator", - description: "Convert text into ASCII art with various font styles and customization options.", + description: + "Convert text into ASCII art with various font styles and customization options.", demoLink: "./public/Day-3_AsciiArtGenerator/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Multiple Fonts", "Customizable Output", "Copy to Clipboard"] + features: [ + "Multiple Fonts", + "Customizable Output", + "Copy to Clipboard", + ], }, { originalDay: 4, name: "Password Visualizer", - description: "Visualize password strength and complexity with interactive graphics.", + description: + "Visualize password strength and complexity with interactive graphics.", demoLink: "./public/Day-4_password_visualizer/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Strength Analysis", "Visual Feedback", "Security Tips"] + features: ["Strength Analysis", "Visual Feedback", "Security Tips"], }, { originalDay: 5, name: "Physics Simulation", - description: "Interactive physics simulation with bouncing balls and gravity effects.", + description: + "Interactive physics simulation with bouncing balls and gravity effects.", demoLink: "./public/Day-5_physics_simulation/index.html", category: "advanced", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Physics Engine", "Interactive Controls", "Real-time Animation"] + features: [ + "Physics Engine", + "Interactive Controls", + "Real-time Animation", + ], }, { originalDay: 6, name: "Quote Generator", - description: "Generate inspirational quotes with beautiful backgrounds and sharing options.", + description: + "Generate inspirational quotes with beautiful backgrounds and sharing options.", demoLink: "./public/Day-6_QuoteGenerator/index.html", category: "basic", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Random Quotes", "Category Filter", "Social Sharing"] + features: ["Random Quotes", "Category Filter", "Social Sharing"], }, { originalDay: 7, name: "Character Word Counter", - description: "Count characters, words, and paragraphs in real-time with detailed statistics.", + description: + "Count characters, words, and paragraphs in real-time with detailed statistics.", demoLink: "./public/Day-7_CharacterWordCounter/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Real-time Counting", "Statistics", "Word Analysis"] + features: ["Real-time Counting", "Statistics", "Word Analysis"], }, { originalDay: 8, name: "Dice Roll Simulator", - description: "Simulate dice rolls with realistic 3D animations and multiple dice options.", + description: + "Simulate dice rolls with realistic 3D animations and multiple dice options.", demoLink: "./public/Day-8_DiceRollSimulator/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["3D Animation", "Multiple Dice", "Statistics Tracking"] + features: ["3D Animation", "Multiple Dice", "Statistics Tracking"], }, { originalDay: 9, name: "Guess My Number", - description: "A fun number guessing game with hints and score tracking.", + description: + "A fun number guessing game with hints and score tracking.", demoLink: "./public/Day-9_Guess_My_Number/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Hint System", "Score Tracking", "Difficulty Levels"] + features: ["Hint System", "Score Tracking", "Difficulty Levels"], }, { originalDay: 10, name: "Neon Brick Breaker", - description: "A modern twist on the classic brick breaker game with neon graphics.", + description: + "A modern twist on the classic brick breaker game with neon graphics.", demoLink: "./public/Day-10_Neon_Brick_Breaker/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Neon Graphics", "Power-ups", "Score System"] + features: ["Neon Graphics", "Power-ups", "Score System"], }, { originalDay: 11, name: "Weather App", - description: "Get real-time weather information for any city with a beautiful interface.", + description: + "Get real-time weather information for any city with a beautiful interface.", demoLink: "./public/Day-11_WeatherApp/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Real-time Data", "City Search", "Weather Icons"] + features: ["Real-time Data", "City Search", "Weather Icons"], }, { originalDay: 13, name: "Coin Flip", - description: "A realistic coin flipping animation with statistics tracking.", + description: + "A realistic coin flipping animation with statistics tracking.", demoLink: "./public/Day-13_Coin_Flip/index.html", category: "basic", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Realistic Animation", "Statistics", "Sound Effects"] + features: ["Realistic Animation", "Statistics", "Sound Effects"], }, { originalDay: 14, name: "E-Waste Management Hub", - description: "Educational platform for e-waste management with location finder.", + description: + "Educational platform for e-waste management with location finder.", demoLink: "./public/Day-14_E-WasteManagementHub/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Location Finder", "Educational Content", "Environmental Impact"] + features: [ + "Location Finder", + "Educational Content", + "Environmental Impact", + ], }, { originalDay: 15, name: "Currency Converter", - description: "Convert between different currencies with real-time exchange rates.", + description: + "Convert between different currencies with real-time exchange rates.", demoLink: "./public/Day-15_Currency_Converter/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Real-time Rates", "Multiple Currencies", "History"] + features: ["Real-time Rates", "Multiple Currencies", "History"], }, { originalDay: 16, name: "Random User Generator", - description: "Generate random user profiles with photos and detailed information.", + description: + "Generate random user profiles with photos and detailed information.", demoLink: "./public/Day-16_Random_User_Generator/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Random Profiles", "Photo Gallery", "Export Data"] + features: ["Random Profiles", "Photo Gallery", "Export Data"], }, { originalDay: 17, name: "Image Search App", - description: "Search and browse high-quality images with advanced filtering options.", + description: + "Search and browse high-quality images with advanced filtering options.", demoLink: "./public/Day-17_Image_Search_App/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Image Search", "High Quality", "Download Options"] + features: ["Image Search", "High Quality", "Download Options"], }, { originalDay: 20, name: "Tic Tac Toe", - description: "Classic tic-tac-toe game with AI opponent and score tracking.", + description: + "Classic tic-tac-toe game with AI opponent and score tracking.", demoLink: "./public/Day-20_tictactoe/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["AI Opponent", "Score Tracking", "Responsive Design"] + features: ["AI Opponent", "Score Tracking", "Responsive Design"], }, { originalDay: 21, name: "Candy Crush", - description: "Match-3 puzzle game inspired by the popular Candy Crush saga.", + description: + "Match-3 puzzle game inspired by the popular Candy Crush saga.", demoLink: "./public/Day-21_candycrush/candy_crush.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Match-3 Gameplay", "Score System", "Power-ups"] + features: ["Match-3 Gameplay", "Score System", "Power-ups"], }, { originalDay: 22, name: "Palette Generator", - description: "Generate beautiful color palettes for your design projects.", + description: + "Generate beautiful color palettes for your design projects.", demoLink: "./public/Day-22_Palette_generator/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Random Generation", "Export Options", "Color Codes"] + features: ["Random Generation", "Export Options", "Color Codes"], }, { originalDay: 23, @@ -337,7 +378,11 @@ class WebDev100Days { demoLink: "./public/Day-23_QRCodeGenerator/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Multiple Data Types", "Customizable Size", "Download Option"] + features: [ + "Multiple Data Types", + "Customizable Size", + "Download Option", + ], }, { originalDay: 23, @@ -346,161 +391,213 @@ class WebDev100Days { demoLink: "./public/Day-23_RockPaperScissor/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Computer AI", "Score Tracking", "Animated Results"] + features: ["Computer AI", "Score Tracking", "Animated Results"], }, { originalDay: 26, name: "Drawing App", - description: "Digital drawing canvas with multiple brush tools and colors.", + description: + "Digital drawing canvas with multiple brush tools and colors.", demoLink: "./public/Day-26_Drawing/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Multiple Brushes", "Color Picker", "Save Drawing"] + features: ["Multiple Brushes", "Color Picker", "Save Drawing"], }, { originalDay: 28, name: "Target Reflex Test", - description: "Test your reflexes by clicking on moving targets as fast as possible.", + description: + "Test your reflexes by clicking on moving targets as fast as possible.", demoLink: "./public/Day-28_Target_Reflex_Test/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Reflex Testing", "High Scores", "Difficulty Levels"] + features: ["Reflex Testing", "High Scores", "Difficulty Levels"], }, { originalDay: 31, name: "Memory Game", - description: "Classic memory card matching game with multiple difficulty levels.", + description: + "Classic memory card matching game with multiple difficulty levels.", demoLink: "./public/Day-31/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Memory Training", "Multiple Levels", "Timer Challenge"] + features: ["Memory Training", "Multiple Levels", "Timer Challenge"], }, { originalDay: 34, name: "Color Picker", - description: "Advanced color picker with multiple format outputs and palette saving.", + description: + "Advanced color picker with multiple format outputs and palette saving.", demoLink: "./public/Day-34-Colour_picker/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Multiple Formats", "Palette Saving", "Color History"] + features: ["Multiple Formats", "Palette Saving", "Color History"], }, { originalDay: 35, name: "Advanced Drawing", - description: "Professional drawing application with layers and advanced tools.", + description: + "Professional drawing application with layers and advanced tools.", demoLink: "./public/Day-35-Drawing/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Layer Support", "Advanced Tools", "Export Options"] + features: ["Layer Support", "Advanced Tools", "Export Options"], }, { originalDay: 36, name: "Notes App", - description: "Feature-rich notes application with search and organization tools.", + description: + "Feature-rich notes application with search and organization tools.", demoLink: "./public/Day-36_Notes_App/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Rich Text Editor", "Search Function", "Tag Organization"] + features: ["Rich Text Editor", "Search Function", "Tag Organization"], }, { originalDay: 42, name: "Note Taker", - description: "Simple and efficient note-taking app with markdown support.", + description: + "Simple and efficient note-taking app with markdown support.", demoLink: "./public/Day-42_NoteTaker/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Markdown Support", "Auto-save", "Export Notes"] + features: ["Markdown Support", "Auto-save", "Export Notes"], }, { originalDay: 45, name: "Audio Visualizer", - description: "Interactive audio visualizer with particle effects and real-time frequency analysis.", + description: + "Interactive audio visualizer with particle effects and real-time frequency analysis.", demoLink: "./public/Day-45/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "Web Audio API"], - features: ["Audio Analysis", "Particle Effects", "Real-time Visualization", "Multiple Themes"] + features: [ + "Audio Analysis", + "Particle Effects", + "Real-time Visualization", + "Multiple Themes", + ], }, { originalDay: 47, name: "Pomodoro Timer", - description: "Productivity timer with task management, customizable themes, and session tracking.", + description: + "Productivity timer with task management, customizable themes, and session tracking.", demoLink: "./public/Day-47_Pomodoro-app/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Timer Sessions", "Task Management", "Dark Mode", "Custom Themes", "Statistics"] + features: [ + "Timer Sessions", + "Task Management", + "Dark Mode", + "Custom Themes", + "Statistics", + ], }, { originalDay: 51, name: "Chess Game", - description: "Interactive chess game with move validation, piece animations, and game state tracking.", + description: + "Interactive chess game with move validation, piece animations, and game state tracking.", demoLink: "./public/Day-51/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript", "SVG"], - features: ["Move Validation", "Piece Animation", "Game Logic", "Interactive Board"] + features: [ + "Move Validation", + "Piece Animation", + "Game Logic", + "Interactive Board", + ], }, { originalDay: 54, name: "Rock Paper Scissors", - description: "Interactive rock paper scissors game with user vs computer gameplay.", + description: + "Interactive rock paper scissors game with user vs computer gameplay.", demoLink: "./public/Day-54_RockPaperSessior/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Move Validation", "Piece Animation", "Game Logic", "Interactive Board"] + features: [ + "Move Validation", + "Piece Animation", + "Game Logic", + "Interactive Board", + ], }, { originalDay: 72, name: "Portfolio Website", - description: "Modern portfolio website template with responsive design and animations.", + description: + "Modern portfolio website template with responsive design and animations.", demoLink: "./public/Day-72_Portfolio/index.html", category: "advanced", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Responsive Design", "Smooth Animations", "Contact Form"] + features: ["Responsive Design", "Smooth Animations", "Contact Form"], }, { originalDay: 101, name: "Etch-a-Sketch", - description: "Digital Etch-a-Sketch with customizable grid and drawing modes.", + description: + "Digital Etch-a-Sketch with customizable grid and drawing modes.", demoLink: "./public/Etch-a-Sketch/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Customizable Grid", "Multiple Drawing Modes", "Clear Function"] + features: [ + "Customizable Grid", + "Multiple Drawing Modes", + "Clear Function", + ], }, { originalDay: 102, name: "GiggleBits", - description: "Fun collection of interactive mini-games and entertainment.", + description: + "Fun collection of interactive mini-games and entertainment.", demoLink: "./public/GiggleBits/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Mini Games", "Entertainment Hub", "High Scores"] + features: ["Mini Games", "Entertainment Hub", "High Scores"], }, { originalDay: 103, name: "Gradient Generator", - description: "Create beautiful CSS gradients with live preview and export functionality.", + description: + "Create beautiful CSS gradients with live preview and export functionality.", demoLink: "./public/Gradient_Generator/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Live Preview", "CSS Export", "Color Picker", "Multiple Gradient Types"] + features: [ + "Live Preview", + "CSS Export", + "Color Picker", + "Multiple Gradient Types", + ], }, { originalDay: 104, name: "Snake and Ladder", - description: "Classic board game with multiplayer support and animated gameplay.", + description: + "Classic board game with multiplayer support and animated gameplay.", demoLink: "./public/Snake-and-Ladder-Game/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Multiplayer Support", "Animated Gameplay", "Classic Rules"] + features: ["Multiplayer Support", "Animated Gameplay", "Classic Rules"], }, { originalDay: 105, name: "Space Jumper Game", - description: "Exciting space-themed jumping game with physics engine and score system.", + description: + "Exciting space-themed jumping game with physics engine and score system.", demoLink: "./public/Space-Jumper-Game/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Physics Engine", "Score System", "Responsive Controls", "Space Theme"] + features: [ + "Physics Engine", + "Score System", + "Responsive Controls", + "Space Theme", + ], }, { originalDay: 106, @@ -509,124 +606,202 @@ class WebDev100Days { demoLink: "./public/Space-War-Game/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript", "Canvas"], - features: ["Enemy AI", "Power-ups", "Multiple Levels", "High Scores"] + features: ["Enemy AI", "Power-ups", "Multiple Levels", "High Scores"], }, { originalDay: 107, name: "Stopwatch", - description: "Precision stopwatch with lap timing and split functionality.", + description: + "Precision stopwatch with lap timing and split functionality.", demoLink: "./public/Stopwatch/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Precision Timing", "Lap Records", "Split Timing", "Export Results"] + features: [ + "Precision Timing", + "Lap Records", + "Split Timing", + "Export Results", + ], }, { originalDay: 108, name: "World Clock", - description: "Display multiple world time zones with real-time updates and customization.", + description: + "Display multiple world time zones with real-time updates and customization.", demoLink: "./public/World_Clock/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Multiple Time Zones", "Real-time Updates", "Custom Locations", "12/24 Hour Format"] + features: [ + "Multiple Time Zones", + "Real-time Updates", + "Custom Locations", + "12/24 Hour Format", + ], }, { originalDay: 109, name: "Notes Tracker", - description: "A simple and organized digital notebook to create, update, and manage notes efficiently.", + description: + "A simple and organized digital notebook to create, update, and manage notes efficiently.", demoLink: "./public/Day-42_NoteTaker/index.html", category: "productivity", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Add/Edit/Delete Notes", "Persistent Local Storage", "Search Functionality", "Dark Mode"] + features: [ + "Add/Edit/Delete Notes", + "Persistent Local Storage", + "Search Functionality", + "Dark Mode", + ], }, { originalDay: 110, name: "Alien Hunt", - description: "A fun and fast-paced shooting game where players hunt down aliens and score points.", + description: + "A fun and fast-paced shooting game where players hunt down aliens and score points.", demoLink: "./public/Day-31/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Alien Spawning", "Score Counter", "Sound Effects", "Game Over Logic"] + features: [ + "Alien Spawning", + "Score Counter", + "Sound Effects", + "Game Over Logic", + ], }, { originalDay: 111, name: "Book Recommendation", - description: "Suggests books based on user-selected genres, moods, or interests with a clean UI.", + description: + "Suggests books based on user-selected genres, moods, or interests with a clean UI.", demoLink: "https://book-recomendation.netlify.app/", category: "education", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Genre-Based Suggestions", "Book Covers & Descriptions", "Responsive Design", "Interactive Filters"] + features: [ + "Genre-Based Suggestions", + "Book Covers & Descriptions", + "Responsive Design", + "Interactive Filters", + ], }, { originalDay: 112, name: "Student Grade Analyzer", - description: "Analyzes student marks and provides insights like total, average, grade, and performance level.", + description: + "Analyzes student marks and provides insights like total, average, grade, and performance level.", demoLink: "./public/Student_Grade_Analyzer/index.html", category: "education", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Marks Input", "Total & Average Calculation", "Grade Assignment", "Performance Feedback"] + features: [ + "Marks Input", + "Total & Average Calculation", + "Grade Assignment", + "Performance Feedback", + ], }, { originalDay: 113, name: "Mood Based Music Suggester", - description: "Recommends music tracks based on the user's selected mood for a personalized listening experience.", + description: + "Recommends music tracks based on the user's selected mood for a personalized listening experience.", demoLink: "./public/Mood_Music_Suggester/index.html", category: "entertainment", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Mood Selection", "Curated Song List", "Audio Player Integration", "Responsive UI"] + features: [ + "Mood Selection", + "Curated Song List", + "Audio Player Integration", + "Responsive UI", + ], }, { originalDay: 114, name: "CalRace", - description: "A fast-paced calculator racing game where players solve math problems under time pressure to advance.", + description: + "A fast-paced calculator racing game where players solve math problems under time pressure to advance.", demoLink: "./public/Day-45/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Math Problem Challenges", "Timer-Based Gameplay", "Score Tracking", "Level Progression"] + features: [ + "Math Problem Challenges", + "Timer-Based Gameplay", + "Score Tracking", + "Level Progression", + ], }, { originalDay: 115, name: "Word Guess Game", - description: "An interactive word guessing game where players try to reveal the hidden word within limited attempts.", + description: + "An interactive word guessing game where players try to reveal the hidden word within limited attempts.", demoLink: "./public/Day53-Word-Guess-Game/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Random Word Generation", "Limited Attempts", "Letter Hints", "Win/Loss Feedback"] + features: [ + "Random Word Generation", + "Limited Attempts", + "Letter Hints", + "Win/Loss Feedback", + ], }, { originalDay: 116, name: "4 in a Row", - description: "A strategic two-player game where the goal is to connect four discs in a row vertically, horizontally, or diagonally.", + description: + "A strategic two-player game where the goal is to connect four discs in a row vertically, horizontally, or diagonally.", demoLink: "./public/Day-57_4_in_a_row/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Two Player Mode", "Win Detection", "Interactive Grid", "Game Reset"] + features: [ + "Two Player Mode", + "Win Detection", + "Interactive Grid", + "Game Reset", + ], }, { originalDay: 117, name: "Budget Tracker", - description: "A simple financial tracking tool to manage income, expenses, and visualize spending habits.", + description: + "A simple financial tracking tool to manage income, expenses, and visualize spending habits.", demoLink: "./public/Budget-Tracker/index.html", category: "productivity", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Add Income & Expenses", "Balance Calculation", "Expense Categories", "Persistent Local Storage"] + features: [ + "Add Income & Expenses", + "Balance Calculation", + "Expense Categories", + "Persistent Local Storage", + ], }, { originalDay: 118, name: "Memory Game App", - description: "A classic card-flipping memory game where players match pairs to win with the fewest moves.", + description: + "A classic card-flipping memory game where players match pairs to win with the fewest moves.", demoLink: "./public/Memory Game App/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Card Matching Logic", "Move Counter", "Timer", "Game Reset Functionality"] + features: [ + "Card Matching Logic", + "Move Counter", + "Timer", + "Game Reset Functionality", + ], }, { originalDay: 119, name: "MyPaint", - description: "A simple and fun digital drawing app that allows users to sketch, doodle, and paint freely on a canvas.", + description: + "A simple and fun digital drawing app that allows users to sketch, doodle, and paint freely on a canvas.", demoLink: "./public/day75-mypaint/index.html", category: "creativity", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Canvas Drawing", "Color Picker", "Brush Size Control", "Clear Canvas Button"] + features: [ + "Canvas Drawing", + "Color Picker", + "Brush Size Control", + "Clear Canvas Button", + ], }, { originalDay: 120, @@ -635,18 +810,16 @@ class WebDev100Days { demoLink: "./public/Fruit_Slicer_Game/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Score System", "Lifes", "Fruit Cutting"] + features: ["Score System", "Lifes", "Fruit Cutting"], }, { - - originalDay: 121, name: "BattleShip", description: "Destroy the enemy ship", demoLink: "./public/Day-71/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript", "Node.js"], - features: ["Hide 'n' seek", "Catch"] + features: ["Hide 'n' seek", "Catch"], }, { originalDay: 122, @@ -655,40 +828,35 @@ class WebDev100Days { demoLink: "./public/Github_Profile_Finder/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Github", "Github Followers ", "Creative"] + features: ["Github", "Github Followers ", "Creative"], }, { - originalDay: 123, name: "HeliFly", description: "Fly the Helicopter", demoLink: "./public/Day-55/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Fly"] + features: ["Fly"], }, { - originalDay: 124, name: "RoboBuilder", description: "Buildd the Robot", demoLink: "./public/Day-72/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Repair", "Fix"] + features: ["Repair", "Fix"], }, { - - - originalDay: 125, name: "Github Profile Finder", description: "Find Github Profile", demoLink: "./public/Github_Profile_Finder/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Github", "Github Followers", "Creative"] + features: ["Github", "Github Followers", "Creative"], }, { originalDay: 126, @@ -698,11 +866,10 @@ class WebDev100Days { demoLink: "./public/Day-69/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Hide n seek", "Catch", "Slap"] + features: ["Hide n seek", "Catch", "Slap"], }, { - originalDay: 127, name: "LeetMatrix", @@ -710,22 +877,16 @@ class WebDev100Days { demoLink: "./public/LeetMatrix/index.html", category: "basic", technologies: ["HTML", "CSS", "JavaScript"], - features: ["LeetCode", "Stats", "Graph"] + features: ["LeetCode", "Stats", "Graph"], }, - - - - { - - originalDay: 128, name: "LoveVerse", description: "A Lovely Website with some crazy stuffs.", demoLink: "./public/Day-70/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Love Game", "Romantic"] + features: ["Love Game", "Romantic"], }, { @@ -735,26 +896,23 @@ class WebDev100Days { demoLink: "./public/QuizProgram/index.html", category: "basic", technologies: ["HTML", "CSS", "JavaScript"], - features: ["Quiz", "Scores"] + features: ["Quiz", "Scores"], }, - - { - - originalDay: 125, name: "University Management System", - - - description: "Manage university operations including courses, students, and faculty.", + description: + "Manage university operations including courses, students, and faculty.", demoLink: "./public/University_managment_system/index.html", category: "utilities", technologies: ["HTML", "CSS", "JavaScript", "API"], - features: ["Visitor Management", "History Tracking", "Search Functionality"] - - - + features: [ + "Visitor Management", + "History Tracking", + "Search Functionality", + ], }, + { originalDay: 126, name: " Pixel Art Maker", @@ -765,86 +923,73 @@ class WebDev100Days { features: ["Grid Creation", "Color Selection", "Download Art", "Reset Canvas"] }, - - - - - { - - originalDay: 131, - name: "Fruit Ninja", - description: "Play with fruits", + originalDay: 131, + name: "Fruit Ninja", + description: "Play with fruits", demoLink: "./public/Day-59/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Cut"] -}, -{ - - originalDay: 132, - name: "Solitaire", - description: "Play with Cards", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Cut"], + }, + { + originalDay: 132, + name: "Solitaire", + description: "Play with Cards", demoLink: "./public/Day-90/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Ace", "King"] -}, -{ - - originalDay: 133, - name: "Door Game", - description: "Open the Doors of your luck", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Ace", "King"], + }, + { + originalDay: 133, + name: "Door Game", + description: "Open the Doors of your luck", demoLink: "./public/Day-91/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Luck", "Doors"] -}, -{ - - originalDay: 134, - name: "Roast Battle", - description: "Roast Your self by AI", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Luck", "Doors"], + }, + { + originalDay: 134, + name: "Roast Battle", + description: "Roast Your self by AI", demoLink: "./public/Day-92/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Roast"] -}, -{ - - originalDay: 135, - name: "Compliment Generator", - description: "Generate Compliment for your love once", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Roast"], + }, + { + originalDay: 135, + name: "Compliment Generator", + description: "Generate Compliment for your love once", demoLink: "./public/Day-93/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Compliments"] -}, -{ - - originalDay: 136, - name: "PickUp Lines", - description: "Generate PickUp Lines for your someonce", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Compliments"], + }, + { + originalDay: 136, + name: "PickUp Lines", + description: "Generate PickUp Lines for your someonce", demoLink: "./public/Day-94/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["PickUp Lines"] -}, -{ - - originalDay: 137, - name: "Hero Identity", - description: "Know who you are", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["PickUp Lines"], + }, + { + originalDay: 137, + name: "Hero Identity", + description: "Know who you are", demoLink: "./public/Day-95/index.html", - category: "games", - technologies: ["HTML", "CSS", "JavaScript"], - features: ["Hero", "Powers"] -}, -{ - - originalDay: 138, - name: "Fotune Teller", - description: "Know your future", + category: "games", + technologies: ["HTML", "CSS", "JavaScript"], + features: ["Hero", "Powers"], + }, + { + originalDay: 138, + name: "Fotune Teller", + description: "Know your future", demoLink: "./public/Day-96/index.html", category: "games", technologies: ["HTML", "CSS", "JavaScript"], @@ -853,23 +998,13 @@ class WebDev100Days { { originalDay: 139, name: "Fitness Tracker", - description: "Advanced, vibrant web app to track daily steps and water intake with charts, themes, and responsive design.", + description: + "Advanced, vibrant web app to track daily steps and water intake with charts, themes, and responsive design.", demoLink: "./public/Fitness_Tracker/index.html", category: "productivity", technologies: ["HTML", "CSS", "JavaScript", "Chart.js"], features: ["Daily Steps & Water Input", "Dark/Light Mode", "Chart.js Visualizations", "Responsive Design", "Duplicate Prevention", "Tooltips on Charts"] }, - - - - - - - - - - - { originalDay: 140, @@ -1040,33 +1175,44 @@ class WebDev100Days { category: "games", technologies: ["HTML", "CSS", "JavaScript"], features: ["Bird", "Score", "Hard"] - } - - - - + }, + { + originalDay: 157, + name: "Hangman", + description: + "A fully responsive, animated Hangman game with SVG drawing, confetti, and playful UI.", + demoLink: "./public/Hangman/index.html", + category: "games", + technologies: ["HTML", "CSS", "JavaScript", "SVG"], + features: [ + "Animated Drawing", + "On-screen Keyboard", + "Confetti Win", + "Mobile Friendly", + ], + } ]; -this.projects = projectsData.map((project, index) => ({ - ...project, - day: index + 1 -})); + this.projects = projectsData.map((project, index) => ({ + ...project, + day: index + 1, + })); -this.filteredProjects = [...this.projects]; + this.filteredProjects = [...this.projects]; } -updateStatistics() { - const statsContainer = document.querySelector('.challenge-stats'); - if (!statsContainer) return; + updateStatistics() { + const statsContainer = document.querySelector(".challenge-stats"); + if (!statsContainer) return; - // Calculate unique technologies - const uniqueTechnologies = [...new Set( - this.projects.flatMap(project => project.technologies) - )].length; + // Calculate unique technologies + const uniqueTechnologies = [ + ...new Set(this.projects.flatMap((project) => project.technologies)), + ].length; - // Update stats - statsContainer.innerHTML = ` + // Update stats + statsContainer.innerHTML = `

Challenge Statistics

@@ -1087,68 +1233,75 @@ updateStatistics() {
`; -} + } -filterProjects() { - let filtered = [...this.projects]; + filterProjects() { + let filtered = [...this.projects]; - if (this.currentFilter !== 'all') { - filtered = filtered.filter(project => project.category === this.currentFilter); - } + if (this.currentFilter !== "all") { + filtered = filtered.filter( + (project) => project.category === this.currentFilter + ); + } - if (this.searchTerm) { - filtered = filtered.filter(project => - project.name.toLowerCase().includes(this.searchTerm) || - project.description.toLowerCase().includes(this.searchTerm) || - project.technologies.some(tech => tech.toLowerCase().includes(this.searchTerm)) || - project.features.some(feature => feature.toLowerCase().includes(this.searchTerm)) - ); + if (this.searchTerm) { + filtered = filtered.filter( + (project) => + project.name.toLowerCase().includes(this.searchTerm) || + project.description.toLowerCase().includes(this.searchTerm) || + project.technologies.some((tech) => + tech.toLowerCase().includes(this.searchTerm) + ) || + project.features.some((feature) => + feature.toLowerCase().includes(this.searchTerm) + ) + ); + } + + this.filteredProjects = filtered; + this.currentPage = 1; + this.renderTable(); } - this.filteredProjects = filtered; - this.currentPage = 1; - this.renderTable(); -} + setActiveFilter(filter) { + this.currentFilter = filter; + this.currentPage = 1; -setActiveFilter(filter) { - this.currentFilter = filter; - this.currentPage = 1; + document.querySelectorAll(".filter-tab").forEach((tab) => { + tab.classList.remove("active"); + }); + document.querySelector(`[data-filter="${filter}"]`).classList.add("active"); - document.querySelectorAll('.filter-tab').forEach(tab => { - tab.classList.remove('active'); - }); - document.querySelector(`[data-filter="${filter}"]`).classList.add('active'); + this.filterProjects(); + } - this.filterProjects(); -} + renderTable() { + const tableContainer = document.querySelector(".projects-table-container"); + const emptyState = document.querySelector(".empty-state"); -renderTable() { - const tableContainer = document.querySelector('.projects-table-container'); - const emptyState = document.querySelector('.empty-state'); + if (!tableContainer) return; - if (!tableContainer) return; + const startIndex = (this.currentPage - 1) * this.projectsPerPage; + const endIndex = startIndex + this.projectsPerPage; + const projectsToShow = this.filteredProjects.slice(startIndex, endIndex); - const startIndex = (this.currentPage - 1) * this.projectsPerPage; - const endIndex = startIndex + this.projectsPerPage; - const projectsToShow = this.filteredProjects.slice(startIndex, endIndex); + tableContainer.innerHTML = ""; - tableContainer.innerHTML = ''; + if (projectsToShow.length === 0) { + if (emptyState) { + emptyState.classList.add("show"); + } + return; + } - if (projectsToShow.length === 0) { if (emptyState) { - emptyState.classList.add('show'); + emptyState.classList.remove("show"); } - return; - } - if (emptyState) { - emptyState.classList.remove('show'); - } + const table = document.createElement("table"); + table.className = "projects-table"; - const table = document.createElement('table'); - table.className = 'projects-table'; - - table.innerHTML = ` + table.innerHTML = ` Day ↕ @@ -1160,7 +1313,9 @@ renderTable() { - ${projectsToShow.map(project => ` + ${projectsToShow + .map( + (project) => ` Day ${project.day} @@ -1168,17 +1323,32 @@ renderTable() {
${project.description}
- ${project.category} + ${ + project.category + }
- ${project.technologies.map(tech => `${tech}`).join('')} + ${project.technologies + .map((tech) => `${tech}`) + .join("")}
- ${project.features.slice(0, 2).map(feature => `${feature}`).join('')} - ${project.features.length > 2 ? `+${project.features.length - 2} more` : ''} + ${project.features + .slice(0, 2) + .map( + (feature) => `${feature}` + ) + .join("")} + ${ + project.features.length > 2 + ? `+${ + project.features.length - 2 + } more` + : "" + }
@@ -1192,95 +1362,105 @@ renderTable() { - `).join('')} + ` + ) + .join("")} `; - tableContainer.appendChild(table); + tableContainer.appendChild(table); - this.renderPagination(); -} + this.renderPagination(); + } -sortTable(column) { - this.filteredProjects.sort((a, b) => { - if (column === 'day') { - return a.day - b.day; - } else if (column === 'name') { - return a.name.localeCompare(b.name); - } else if (column === 'category') { - return a.category.localeCompare(b.category); - } - return 0; - }); + sortTable(column) { + this.filteredProjects.sort((a, b) => { + if (column === "day") { + return a.day - b.day; + } else if (column === "name") { + return a.name.localeCompare(b.name); + } else if (column === "category") { + return a.category.localeCompare(b.category); + } + return 0; + }); - this.renderTable(); -} + this.renderTable(); + } -renderPagination() { - const totalPages = Math.ceil(this.filteredProjects.length / this.projectsPerPage); - const paginationContainer = document.querySelector('.pagination'); + renderPagination() { + const totalPages = Math.ceil( + this.filteredProjects.length / this.projectsPerPage + ); + const paginationContainer = document.querySelector(".pagination"); - if (!paginationContainer || totalPages <= 1) { - if (paginationContainer) paginationContainer.style.display = 'none'; - return; - } + if (!paginationContainer || totalPages <= 1) { + if (paginationContainer) paginationContainer.style.display = "none"; + return; + } - paginationContainer.style.display = 'flex'; - paginationContainer.innerHTML = ''; - - const prevBtn = document.createElement('button'); - prevBtn.className = 'pagination-btn'; - prevBtn.disabled = this.currentPage === 1; - prevBtn.innerHTML = '‹'; - prevBtn.dataset.page = this.currentPage - 1; - paginationContainer.appendChild(prevBtn); - - for (let i = 1; i <= totalPages; i++) { - if (i === 1 || i === totalPages || (i >= this.currentPage - 2 && i <= this.currentPage + 2)) { - const pageBtn = document.createElement('button'); - pageBtn.className = `pagination-btn ${i === this.currentPage ? 'active' : ''}`; - pageBtn.textContent = i; - pageBtn.dataset.page = i; - paginationContainer.appendChild(pageBtn); - } else if (i === this.currentPage - 3 || i === this.currentPage + 3) { - const ellipsis = document.createElement('span'); - ellipsis.textContent = '...'; - ellipsis.className = 'pagination-info'; - paginationContainer.appendChild(ellipsis); + paginationContainer.style.display = "flex"; + paginationContainer.innerHTML = ""; + + const prevBtn = document.createElement("button"); + prevBtn.className = "pagination-btn"; + prevBtn.disabled = this.currentPage === 1; + prevBtn.innerHTML = "‹"; + prevBtn.dataset.page = this.currentPage - 1; + paginationContainer.appendChild(prevBtn); + + for (let i = 1; i <= totalPages; i++) { + if ( + i === 1 || + i === totalPages || + (i >= this.currentPage - 2 && i <= this.currentPage + 2) + ) { + const pageBtn = document.createElement("button"); + pageBtn.className = `pagination-btn ${ + i === this.currentPage ? "active" : "" + }`; + pageBtn.textContent = i; + pageBtn.dataset.page = i; + paginationContainer.appendChild(pageBtn); + } else if (i === this.currentPage - 3 || i === this.currentPage + 3) { + const ellipsis = document.createElement("span"); + ellipsis.textContent = "..."; + ellipsis.className = "pagination-info"; + paginationContainer.appendChild(ellipsis); + } } - } - const nextBtn = document.createElement('button'); - nextBtn.className = 'pagination-btn'; - nextBtn.disabled = this.currentPage === totalPages; - nextBtn.innerHTML = '›'; - nextBtn.dataset.page = this.currentPage + 1; - paginationContainer.appendChild(nextBtn); - - const pageInfo = document.createElement('div'); - pageInfo.className = 'pagination-info'; - pageInfo.textContent = `${this.currentPage} of ${totalPages}`; - paginationContainer.appendChild(pageInfo); -} + const nextBtn = document.createElement("button"); + nextBtn.className = "pagination-btn"; + nextBtn.disabled = this.currentPage === totalPages; + nextBtn.innerHTML = "›"; + nextBtn.dataset.page = this.currentPage + 1; + paginationContainer.appendChild(nextBtn); + + const pageInfo = document.createElement("div"); + pageInfo.className = "pagination-info"; + pageInfo.textContent = `${this.currentPage} of ${totalPages}`; + paginationContainer.appendChild(pageInfo); + } -debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; clearTimeout(timeout); - func(...args); + timeout = setTimeout(later, wait); }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; -} + } } let app; -document.addEventListener('DOMContentLoaded', () => { +document.addEventListener("DOMContentLoaded", () => { app = new WebDev100Days(); }); -if (typeof module !== 'undefined' && module.exports) { +if (typeof module !== "undefined" && module.exports) { module.exports = WebDev100Days; }