acesdit · Tejas-Santosh-Nalawade · Oct 23, 2025 · Oct 23, 2025
diff --git a/Domains/Frontend/MiniProjects/memory-match-game/README.md b/Domains/Frontend/MiniProjects/memory-match-game/README.md
@@ -0,0 +1,82 @@
+# Memory Match Game
+
+**Contributor:** [Tanvi2307](https://github.com/Tanvi2307)
+
+A fun and simple memory card matching game built with HTML, CSS, and JavaScript.
+
+---
+
+## Overview
+
+Memory Match Game is a classic card matching game where players flip over cards to find pairs with the same symbol. The goal is to match all pairs in the least time possible. This project demonstrates the use of DOM manipulation, event handling, and CSS animations.
+
+---
+
+## Tech Stack
+
+| Technology | Purpose                       |
+|------------|------------------------------|
+| HTML5      | Game structure and layout    |
+| CSS3       | Styling and animations       |
+| JavaScript | Game logic and interactivity |
+
+---
+
+## How to Play
+
+1. Click on any card to flip it over and reveal the symbol.  
+2. Flip another card to find its matching pair.  
+3. If the two cards match, they stay flipped.  
+4. If they do not match, they flip back after a short delay.  
+5. Continue flipping cards until all pairs are matched.  
+6. Use the **Restart Game** button to start over at any time.
+
+---
+
+## Features
+
+- Randomly shuffles cards on every game start.  
+- Smooth flip animation using CSS transitions.  
+- Prevents clicking more than two cards at once.  
+- Tracks matched pairs and alerts when the game is won.  
+- Restart button to reset the game.
+
+---
+
+## Installation
+
+To run the game locally:
+
+1. Clone or download the repository.  
+2. Navigate to `Domains/Frontend/MiniProjects/memory-match-game` folder.  
+3. Open `index.html` in any modern web browser.
+
+---
+
+## Usage
+
+No installation or build tools required! Simply open the `index.html` file in your favorite browser and enjoy playing.
+
+---
+
+## Contributing
+
+Contributions are welcome! To contribute:
+
+1. Fork the original repository.  
+2. Create a new branch for your feature or bugfix.  
+3. Add your project files in the appropriate folder.  
+4. Commit and push your changes.  
+5. Open a Pull Request describing your additions.
+
+Please follow the project structure and keep code clean and well-documented.
+
+---
+
+## License
+
+This project is open source and available under the [MIT License](LICENSE).
+
+---
+
+Happy Matching! 🧠🎉
diff --git a/Domains/Frontend/MiniProjects/memory-match-game/index.html b/Domains/Frontend/MiniProjects/memory-match-game/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Memory Match Game</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <h1>Memory Match Game</h1>
+  <div class="game-container" id="game">
+    <!-- Cards will be generated here -->
+  </div>
+  <button id="restart">Restart Game</button>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/memory-match-game/script.js b/Domains/Frontend/MiniProjects/memory-match-game/script.js
@@ -0,0 +1,90 @@
+const cardsArray = ['🍎', '🍌', '🍇', '🍓', '🍍', '🥝', '🍉', '🍒'];
+let cards = [...cardsArray, ...cardsArray]; // duplicate for pairs
+let flippedCards = [];
+let matchedCount = 0;
+
+const gameContainer = document.getElementById('game');
+const restartBtn = document.getElementById('restart');
+
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+function createCard(symbol) {
+  const card = document.createElement('div');
+  card.classList.add('card');
+  card.dataset.symbol = symbol;
+
+  const cardInner = document.createElement('div');
+  cardInner.classList.add('card-inner');
+
+  const cardFront = document.createElement('div');
+  cardFront.classList.add('card-front');
+  cardFront.textContent = symbol;
+
+  const cardBack = document.createElement('div');
+  cardBack.classList.add('card-back');
+  cardBack.textContent = '?';
+
+  cardInner.appendChild(cardFront);
+  cardInner.appendChild(cardBack);
+  card.appendChild(cardInner);
+
+  card.addEventListener('click', () => flipCard(card));
+
+  return card;
+}
+
+function flipCard(card) {
+  if (
+    flippedCards.length < 2 &&
+    !flippedCards.includes(card) &&
+    !card.classList.contains('matched')
+  ) {
+    card.classList.add('flipped');
+    flippedCards.push(card);
+
+    if (flippedCards.length === 2) {
+      checkMatch();
+    }
+  }
+}
+
+function checkMatch() {
+  const [card1, card2] = flippedCards;
+  if (card1.dataset.symbol === card2.dataset.symbol) {
+    card1.classList.add('matched');
+    card2.classList.add('matched');
+    matchedCount += 2;
+    flippedCards = [];
+
+    if (matchedCount === cards.length) {
+      setTimeout(() => alert('🎉 You matched all pairs! You win! 🎉'), 500);
+    }
+  } else {
+    setTimeout(() => {
+      card1.classList.remove('flipped');
+      card2.classList.remove('flipped');
+      flippedCards = [];
+    }, 1000);
+  }
+}
+
+function setupGame() {
+  matchedCount = 0;
+  flippedCards = [];
+  gameContainer.innerHTML = '';
+  cards = shuffle(cards);
+  cards.forEach(symbol => {
+    const card = createCard(symbol);
+    gameContainer.appendChild(card);
+  });
+}
+
+restartBtn.addEventListener('click', setupGame);
+
+setupGame();
diff --git a/Domains/Frontend/MiniProjects/memory-match-game/style.css b/Domains/Frontend/MiniProjects/memory-match-game/style.css
@@ -0,0 +1,80 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #2c3e50;
+  color: #ecf0f1;
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+.game-container {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-gap: 15px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  background-color: #34495e;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+  perspective: 1000px;
+}
+
+.card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.card.flipped .card-inner {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 50px;
+}
+
+.card-front {
+  background-color: #1abc9c;
+  color: #fff;
+  transform: rotateY(180deg);
+}
+
+.card-back {
+  background-color: #2980b9;
+  color: #fff;
+}
+
+button#restart {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #e74c3c;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+}
+
+button#restart:hover {
+  background-color: #c0392b;
+}