Added new functions

app.js

@@ -1,4 +1,33 @@
 document.addEventListener('DOMContentLoaded', () => {
+  //Get The Start Button
+
+  document.getElementById('startGame').addEventListener('click', 
+       () => {
+            document.querySelector('.game-box').style.display = 'flex';
+            document.getElementById('startGame').style.display = 'none'
+       }
+  )
+
+  //Show Game Rules
+
+  // Open modal
+  document.getElementById('openRulesBtn').onclick = function () {
+    document.getElementById('rulesModal').style.display = 'block';
+  };
+
+  // Close modal
+  document.querySelector('.close-btn').onclick = function () {
+    document.getElementById('rulesModal').style.display = 'none';
+  };
+
+  // Close when clicking outside the modal
+  window.onclick = function (e) {
+    const modal = document.getElementById('rulesModal');
+    if (e.target === modal) {
+      modal.style.display = 'none';
+    }
+  };
+
   //list all card options
   const cardArray = [
     {
@@ -51,17 +80,31 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   ]
 
-  cardArray.sort(() => 0.5 - Math.random())
-
   const grid = document.querySelector('.grid')
   const resultDisplay = document.querySelector('#result')
   let cardsChosen = []
   let cardsChosenId = []
   let cardsWon = []
 
+
+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;
+}
+
+let shuffledArray = shuffle(cardArray);
+
+
+  createBoard();
+
   //create your board
   function createBoard() {
-    for (let i = 0; i < cardArray.length; i++) {
+    for (let i = 0; i < shuffledArray.length; i++) {
       const card = document.createElement('img')
       card.setAttribute('src', 'images/blank.png')
       card.setAttribute('data-id', i)
@@ -77,27 +120,40 @@ document.addEventListener('DOMContentLoaded', () => {
     const optionTwoId = cardsChosenId[1]
 
     if(optionOneId == optionTwoId) {
-      cards[optionOneId].setAttribute('src', 'images/blank.png')
-      cards[optionTwoId].setAttribute('src', 'images/blank.png')
-      alert('You have clicked the same image!')
+      cards[optionOneId].setAttribute('src', './images/blank.png')
+      setTimeOut(
+        () => {
+          document.getElementById('result').innerHTML = 'You have clicked the same image!';
+        }
+      )
+      cardsChosen = []
+      cardsChosenIds = []
     }
     else if (cardsChosen[0] === cardsChosen[1]) {
-      alert('You found a match')
+      cards[cardsChosenIds[0]].style.cursor = 'not-allowed'
+      cards[cardsChosenIds[1]].style.cursor = 'not-allowed'
       cards[optionOneId].setAttribute('src', 'images/white.png')
       cards[optionTwoId].setAttribute('src', 'images/white.png')
       cards[optionOneId].removeEventListener('click', flipCard)
       cards[optionTwoId].removeEventListener('click', flipCard)
       cardsWon.push(cardsChosen)
+      document.body.classList.remove('change-red')
+      document.body.classList.add('change-green')
     } else {
       cards[optionOneId].setAttribute('src', 'images/blank.png')
       cards[optionTwoId].setAttribute('src', 'images/blank.png')
-      alert('Sorry, try again')
+      document.body.classList.remove('change-green')
+      document.body.classList.add('change-red')
     }
     cardsChosen = []
     cardsChosenId = []
     resultDisplay.textContent = cardsWon.length
     if  (cardsWon.length === cardArray.length/2) {
-      resultDisplay.textContent = 'Congratulations! You found them all!'
+      gridDisplay.classList.add('restart-game')
+      gridDisplay.innerHTML = 
+                     `Congratulations 🥳🥳. You Just Won!! </br>
+                     <button id='restartGame' onclick='location.reload()'>Restart The Game</button>
+                     `
     }
   }
 
@@ -112,5 +168,4 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-  createBoard()
 })