tajulafreen · tajulafreen · Aug 8, 2024 · Aug 8, 2024 · Aug 8, 2024 · Aug 8, 2024
diff --git a/README.md b/README.md
@@ -364,6 +364,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Memory Card Game</summary>
+<p>The Memory Card Game is a classic card-matching game designed to enhance cognitive skills and memory. Players are presented with a grid of face-down cards. The goal is to find and match all pairs of cards. This project demonstrates fundamental web development skills using HTML, CSS, and JavaScript.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MemoryCard/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MemoryCard">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/MemoryCard/index.html b/Source-Code/MemoryCard/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Card Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Memory Card Game</h1>
+        <div id="game-board" class="game-board">
+            <!-- Cards will be dynamically inserted here -->
+        </div>
+        <button class="btn">Start New Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/MemoryCard/script.js b/Source-Code/MemoryCard/script.js
@@ -0,0 +1,107 @@
+const cardValues = [
+  '🍎',
+  '🍎',
+  '🍌',
+  '🍌',
+  '🍮',
+  '🍮',
+  '🎂',
+  '🎂',
+  '🍟',
+  '🍟',
+  '🍫',
+  '🍫',
+  '🍇',
+  '🍇',
+  '🥝',
+  '🥝',
+];
+let shuffledValues = [];
+let cardElements = [];
+let flippedCards = [];
+let matchedCards = [];
+
+const shuffleArray = (array) => {
+  let currentIndex = array.length;
+  let temporaryValue;
+  let randomIndex;
+
+  while (currentIndex !== 0) {
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex -= 1;
+
+    temporaryValue = array[currentIndex];
+    array[currentIndex] = array[randomIndex];
+    array[randomIndex] = temporaryValue;
+  }
+
+  return array;
+};
+
+const checkMatch = () => {
+  const [card1, card2] = flippedCards;
+
+  if (
+    card1.querySelector('.card-back').textContent
+    === card2.querySelector('.card-back').textContent
+  ) {
+    matchedCards.push(card1, card2);
+  } else {
+    card1.classList.remove('flipped');
+    card2.classList.remove('flipped');
+  }
+  flippedCards = [];
+
+  if (matchedCards.length === cardElements.length) {
+    alert('Congratulations! You found all pairs!');
+  }
+};
+
+const flipCard = (card) => {
+  if (
+    flippedCards.length < 2
+    && !card.classList.contains('flipped')
+    && !matchedCards.includes(card)
+  ) {
+    card.classList.add('flipped');
+    flippedCards.push(card);
+
+    if (flippedCards.length === 2) {
+      setTimeout(checkMatch, 1000);
+    }
+  }
+};
+const startGame = () => {
+  shuffledValues = shuffleArray(cardValues);
+  const board = document.getElementById('game-board');
+  board.innerHTML = '';
+  matchedCards = [];
+  cardElements = [];
+  for (let i = 0; i < shuffledValues.length; i += 1) {
+    const card = document.createElement('div');
+    card.classList.add('card');
+
+    const cardInner = document.createElement('div');
+    cardInner.classList.add('card-inner');
+
+    const cardFront = document.createElement('div');
+    cardFront.classList.add('card-front');
+
+    const cardBack = document.createElement('div');
+    cardBack.classList.add('card-back');
+    cardBack.textContent = shuffledValues[i];
+
+    cardInner.appendChild(cardFront);
+    cardInner.appendChild(cardBack);
+    card.appendChild(cardInner);
+
+    card.addEventListener('click', () => flipCard(card));
+    board.appendChild(card);
+    cardElements.push(card);
+  }
+};
+
+const btn = document.querySelector('.btn');
+btn.addEventListener('click', startGame);
+// Initialize the game when the page loads
+window.onload = startGame;
diff --git a/Source-Code/MemoryCard/style.css b/Source-Code/MemoryCard/style.css
@@ -0,0 +1,87 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #eeddf0;
+}
+
+h1 {
+  color: #d38692;
+  font-size: 2em;
+}
+
+.container {
+  text-align: center;
+  background-color: #a7f1c5;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-template-rows: repeat(4, 100px);
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  background-color: #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2em;
+  cursor: pointer;
+  color: transparent;
+  perspective: 1000px; /* Added for 3D effect */
+}
+
+.card-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.card-front {
+  background-color: #e68ce0;
+}
+
+.card-back {
+  background-color: #fff;
+  font-size: 60px;
+  color: #000;
+  transform: rotateY(180deg);
+}
+
+.card.flipped .card-inner {
+  transform: rotateY(180deg);
+}
+
+button {
+  padding: 15px 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: rgb(228, 240, 240);
+  border: none;
+  cursor: pointer;
+  background-color: #008cba;
+}