DarshVallur · DarshVallur · May 7, 2020 · May 7, 2020
diff --git a/JSMemoryGame/app.js b/JSMemoryGame/app.js
@@ -0,0 +1,107 @@
+document.addEventListener('DOMContentLoaded', () => {
+  //card options -
+  const cardArray = [
+    {
+      name: 'gal-1',
+      img: 'images/gal-1.jpeg'
+    },
+    {
+      name: 'gal-2',
+      img: 'images/gal-2.jpeg'
+    },
+    {
+      name: 'gal-3',
+      img: 'images/gal-3.jpeg'
+    },
+    {
+      name: 'gal-4',
+      img: 'images/gal-4.jpeg'
+    },
+    {
+      name: 'gal-5',
+      img: 'images/gal-5.jpeg'
+    },
+    {
+      name: 'gal-6',
+      img: 'images/gal-6.jpeg'
+    },
+    {
+      name: 'gal-1',
+      img: 'images/gal-1.jpeg'
+    },
+    {
+      name: 'gal-2',
+      img: 'images/gal-2.jpeg'
+    },
+    {
+      name: 'gal-3',
+      img: 'images/gal-3.jpeg'
+    },
+    {
+      name: 'gal-4',
+      img: 'images/gal-4.jpeg'
+    },
+    {
+      name: 'gal-5',
+      img: 'images/gal-5.jpeg'
+    },
+    {
+      name: 'gal-6',
+      img: 'images/gal-6.jpeg'
+    }
+  ];
+
+  cardArray.sort(() => 0.5 - Math.random());
+
+  const grid = document.querySelector('.grid');
+  const resultDisplay = document.querySelector('#result');
+  var cardsChosen = [];
+  var cardsChosenId = [];
+  var cardsWon = [];
+  //create your board
+  function createBoard() {
+    for (let i = 0; i < cardArray.length; i++) {
+      var card = document.createElement('img');
+      card.setAttribute('src', 'images/start.jpeg');
+      card.setAttribute('date-id', i);
+      card.addEventListener('click', flipcard);
+      grid.appendChild(card);
+    }
+  }
+
+  //check for matches
+  function checkForMatch() {
+    var cards = document.querySelectorAll('img');
+    const optionOneId = cardsChosenId[0];
+    const optionTwoId = cardsChosenId[1];
+    if (cardsChosen[0] === cardsChosen[1]) {
+      alert('You found a match');
+      cards[optionOneId].setAttribute('src', 'images/logo.png');
+      cards[optionTwoId].setAttribute('src', 'images/logo.png');
+      cardsWon.push(cardsChosen);
+    } else {
+      cards[optionOneId].setAttribute('src', 'images/start.jpeg');
+      cards[optionTwoId].setAttribute('src', 'images/start.jpeg');
+      alert('Sorry, try again');
+    }
+    cardsChosen = [];
+    cardsChosenId = [];
+    resultDisplay.textContent = cardsWon.length;
+    if (cardsWon.length === cardArray.length / 2) {
+      resultDisplay.textContent = 'Congratulations! You found the items';
+    }
+  }
+
+  //flip your card
+  function flipcard() {
+    var cardId = this.getAttribute('date-id');
+    cardsChosen.push(cardArray[cardId].name);
+    cardsChosenId.push(cardId);
+    this.setAttribute('src', cardArray[cardId].img);
+    if (cardsChosen.length === 2) {
+      setTimeout(checkForMatch, 500);
+    }
+  }
+
+  createBoard();
+});
diff --git a/JSMemoryGame/images/gal-1.jpeg b/JSMemoryGame/images/gal-1.jpeg
diff --git a/JSMemoryGame/images/gal-2.jpeg b/JSMemoryGame/images/gal-2.jpeg
diff --git a/JSMemoryGame/images/gal-3.jpeg b/JSMemoryGame/images/gal-3.jpeg
diff --git a/JSMemoryGame/images/gal-4.jpeg b/JSMemoryGame/images/gal-4.jpeg
diff --git a/JSMemoryGame/images/gal-5.jpeg b/JSMemoryGame/images/gal-5.jpeg
diff --git a/JSMemoryGame/images/gal-6.jpeg b/JSMemoryGame/images/gal-6.jpeg
diff --git a/JSMemoryGame/images/gal-7.jpeg b/JSMemoryGame/images/gal-7.jpeg
diff --git a/JSMemoryGame/images/logo.png b/JSMemoryGame/images/logo.png
diff --git a/JSMemoryGame/images/start.jpeg b/JSMemoryGame/images/start.jpeg
diff --git a/JSMemoryGame/index.html b/JSMemoryGame/index.html
@@ -0,0 +1,15 @@
+<!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>
+    <script src="app.js"></script>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h3>Score: <span id="result"></span></h3>
+
+    <div class="grid"></div>
+  </body>
+</html>
diff --git a/JSMemoryGame/styles.css b/JSMemoryGame/styles.css
@@ -0,0 +1,6 @@
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    height: 300px;
+    width: 400px;
+}