Resilient-Labs · ChrisB1099 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,29 @@
+/* I used chatGPT to help me style the game  */
+#game-board {
+    display: flex;
+    flex-wrap: wrap;
+    width: 200px;
+    margin: 20px auto;
+}
+
+
+.card {
+    width: 60px;
+    height: 100px;
+    margin: 5px;
+    background-color: lightblue;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+
+.flipped {
+    background-color: red;
+    color: white;
+    transform: rotateY(180deg);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Game</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div id="game-board"></div>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,74 @@
+// setting variables
+const gameBoard = document.getElementById('game-board');
+const cardValues = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]; // Matching pairs
+let firstCard = null;
+let secondCard = null;
+let flippedCards = 0; //  this is tracking how many pairs have been found
+
+
+function shuffle(array) {                      // this function is helping too shuffle the cards radomnly foe each game
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]]; // Swap elements 
+    }
+}
+shuffle(cardValues);
+
+cardValues.forEach(value => {                    // 3. Create each card element and add it to the game board
+    const card = document.createElement('div');
+    card.classList.add('card');
+    card.dataset.value = value; // Store the card's value for matching
+    card.textContent = ''; // Initially empty, shows when flipped
+
+    // Flip the card on click
+    card.addEventListener('click', () => flipCard(card));
+    gameBoard.appendChild(card);
+});
+
+
+function flipCard(card) {                                                          //this function is to flip the card 
+    if (card.classList.contains('flipped') || secondCard) return; // Prevent double clicks
+
+    card.classList.add('flipped');
+    card.textContent = card.dataset.value;
+
+
+    if (!firstCard) {                                     //this checks to see if the first or second card is being flipped 
+        firstCard = card;
+    } else {
+        secondCard = card;
+        checkMatch();
+    }
+}
+
+
+function checkMatch() {                                                                       
+    if (firstCard.dataset.value === secondCard.dataset.value) {                  // If values match, keep them flipped
+        flippedCards += 2;
+        resetSelection();
+
+
+        if (flippedCards === cardValues.length) {                                 // Check if the game is finished
+            alert('Congratulations, you matched all pairs!');
+        }
+    } else {
+
+        setTimeout(() => {                                                       // If they don't match, flip them back after a short delay
+            firstCard.classList.remove('flipped');
+            secondCard.classList.remove('flipped');
+            firstCard.textContent = '';
+            secondCard.textContent = '';
+            resetSelection();
+        }, 1000);
+    }
+}
+
+ //  Reset selected cards
+function resetSelection() {
+    firstCard = null;
+    secondCard = null;
+}
+
+
+
+