diff --git a/Domains/Frontend/MiniProjects/Hangman game/index.html b/Domains/Frontend/MiniProjects/Hangman game/index.html
new file mode 100644
index 00000000..e8042942
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/Hangman game/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ 🎯 Hangman Game
+
+
+
+ 🎯 Hangman Game
+
+
+
+
+
+
+
+
+
+
diff --git a/Domains/Frontend/MiniProjects/Hangman game/script.js b/Domains/Frontend/MiniProjects/Hangman game/script.js
new file mode 100644
index 00000000..aa5b2d0c
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/Hangman game/script.js
@@ -0,0 +1,157 @@
+const wordEl = document.getElementById('word');
+const wrongLettersEl = document.getElementById('wrong-letters');
+const playAgainBtn = document.getElementById('play-button');
+const popup = document.getElementById('popup-container');
+const finalMessage = document.getElementById('final-message');
+const keyboardEl = document.getElementById('keyboard');
+const canvas = document.getElementById('hangmanCanvas');
+const ctx = canvas.getContext('2d');
+
+// --- Game Data ---
+const wordList = [
+ "javascript", "hangman", "developer", "algorithm",
+ "keyboard", "puzzle", "variable", "function",
+ "react", "python", "project", "computer",
+ "internet", "dynamic", "syntax", "frontend"
+];
+
+let selectedWord = wordList[Math.floor(Math.random() * wordList.length)];
+const correctLetters = [];
+const wrongLetters = [];
+
+// --- Draw Hangman parts ---
+function drawHangman(errors) {
+ ctx.lineWidth = 3;
+ ctx.strokeStyle = "#333";
+
+ if (errors === 1) { // Base
+ ctx.beginPath();
+ ctx.moveTo(10, 240);
+ ctx.lineTo(190, 240);
+ ctx.stroke();
+ }
+ if (errors === 2) { // Pole
+ ctx.beginPath();
+ ctx.moveTo(50, 240);
+ ctx.lineTo(50, 20);
+ ctx.stroke();
+ }
+ if (errors === 3) { // Top bar
+ ctx.beginPath();
+ ctx.moveTo(50, 20);
+ ctx.lineTo(150, 20);
+ ctx.stroke();
+ }
+ if (errors === 4) { // Rope
+ ctx.beginPath();
+ ctx.moveTo(150, 20);
+ ctx.lineTo(150, 50);
+ ctx.stroke();
+ }
+ if (errors === 5) { // Head
+ ctx.beginPath();
+ ctx.arc(150, 70, 20, 0, Math.PI * 2);
+ ctx.stroke();
+ }
+ if (errors === 6) { // Body
+ ctx.beginPath();
+ ctx.moveTo(150, 90);
+ ctx.lineTo(150, 160);
+ ctx.stroke();
+ }
+ if (errors === 7) { // Left Arm
+ ctx.beginPath();
+ ctx.moveTo(150, 100);
+ ctx.lineTo(120, 130);
+ ctx.stroke();
+ }
+ if (errors === 8) { // Right Arm
+ ctx.beginPath();
+ ctx.moveTo(150, 100);
+ ctx.lineTo(180, 130);
+ ctx.stroke();
+ }
+ if (errors === 9) { // Left Leg
+ ctx.beginPath();
+ ctx.moveTo(150, 160);
+ ctx.lineTo(130, 200);
+ ctx.stroke();
+ }
+ if (errors === 10) { // Right Leg (Final)
+ ctx.beginPath();
+ ctx.moveTo(150, 160);
+ ctx.lineTo(170, 200);
+ ctx.stroke();
+ }
+}
+
+// --- Display Word ---
+function displayWord() {
+ wordEl.innerHTML = `
+ ${selectedWord
+ .split('')
+ .map(letter => `
+
+ ${correctLetters.includes(letter) ? letter : ''}
+
+ `)
+ .join('')}
+ `;
+
+ const innerWord = wordEl.innerText.replace(/\n/g, '');
+ if (innerWord === selectedWord) {
+ finalMessage.innerText = '🎉 Congratulations! You won!';
+ popup.style.display = 'flex';
+ }
+}
+
+// --- Update Wrong Letters ---
+function updateWrongLetters() {
+ wrongLettersEl.innerText = wrongLetters.join(' ');
+ drawHangman(wrongLetters.length);
+
+ if (wrongLetters.length === 10) {
+ finalMessage.innerText = `😢 You lost! The word was "${selectedWord}".`;
+ popup.style.display = 'flex';
+ }
+}
+
+// --- Create On-screen Keyboard ---
+function createKeyboard() {
+ const keys = 'abcdefghijklmnopqrstuvwxyz'.split('');
+ keys.forEach(key => {
+ const btn = document.createElement('button');
+ btn.classList.add('key');
+ btn.innerText = key;
+ btn.addEventListener('click', () => handleGuess(key));
+ keyboardEl.appendChild(btn);
+ });
+}
+
+// --- Handle Guess ---
+function handleGuess(letter) {
+ if (correctLetters.includes(letter) || wrongLetters.includes(letter)) return;
+
+ if (selectedWord.includes(letter)) {
+ correctLetters.push(letter);
+ displayWord();
+ } else {
+ wrongLetters.push(letter);
+ updateWrongLetters();
+ }
+}
+
+// --- Restart Game ---
+playAgainBtn.addEventListener('click', () => {
+ correctLetters.splice(0);
+ wrongLetters.splice(0);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ selectedWord = wordList[Math.floor(Math.random() * wordList.length)];
+ popup.style.display = 'none';
+ wrongLettersEl.innerText = '';
+ displayWord();
+});
+
+// --- Init ---
+displayWord();
+createKeyboard();
\ No newline at end of file
diff --git a/Domains/Frontend/MiniProjects/Hangman game/styles.css b/Domains/Frontend/MiniProjects/Hangman game/styles.css
new file mode 100644
index 00000000..6d2aacd5
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/Hangman game/styles.css
@@ -0,0 +1,108 @@
+body {
+ background: linear-gradient(135deg, #74ABE2, #5563DE);
+ color: #fff;
+ font-family: 'Poppins', sans-serif;
+ text-align: center;
+ margin: 0;
+ overflow-x: hidden;
+}
+
+h1 {
+ margin-top: 30px;
+ font-size: 2em;
+ text-shadow: 0 0 8px #000;
+}
+
+.game-container {
+ margin: 40px auto;
+ width: 320px;
+ text-align: center;
+}
+
+canvas {
+ background: #fff;
+ border-radius: 10px;
+ margin-bottom: 20px;
+}
+
+.word {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-bottom: 20px;
+}
+
+.letter {
+ border-bottom: 3px solid #fff;
+ font-size: 24px;
+ width: 20px;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.wrong-letters-container {
+ margin: 20px;
+ font-size: 18px;
+}
+
+.keyboard {
+ display: grid;
+ grid-template-columns: repeat(10, 1fr);
+ gap: 8px;
+ justify-content: center;
+ width: 300px;
+ margin: 20px auto;
+}
+
+.key {
+ background: #fff;
+ color: #333;
+ border: none;
+ border-radius: 6px;
+ font-weight: bold;
+ padding: 8px;
+ cursor: pointer;
+ transition: 0.2s;
+}
+.key:hover {
+ background: #ffc107;
+}
+
+.popup-container {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0,0,0,0.6);
+}
+
+.popup {
+ background: #fff;
+ color: #333;
+ padding: 30px;
+ border-radius: 10px;
+ text-align: center;
+ width: 250px;
+}
+
+button {
+ background: #5563DE;
+ color: #fff;
+ border: none;
+ border-radius: 6px;
+ padding: 10px 20px;
+ cursor: pointer;
+ transition: 0.3s;
+}
+button:hover { background: #3948d6; }
+
+footer {
+ font-size: 0.9em;
+ margin: 20px 0;
+ opacity: 0.8;
+}