Resilient-Labs · Michaelariasdls · Oct 31, 2023 · Oct 31, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/README.md b/README.md
@@ -1,22 +1,17 @@
-# ♠️ Week08 Bootcamp2019a Project: Matching Card Game
-
-### Goal: Make a 10 card memory game - users must be able to select two cards and check if they are a match. If they are a match, they stay flipped. If not, they flip back over. Game is done when all cards are matched and flipped over. Example: http://www.fruit-burst.co.uk/fun-and-games/pairs-game 
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+ 🎤Project: Matching card game!
+
+This is my Matching card game project, a cool web application built with HTML, CSS, and JavaScript. It's about matching cards 12 cards in total, i went with a dog & cat theme. Good luck 
+
+## How It's Made
+
+I used HTML, CSS, and JavaScript to create this project, I used HTML to layout the cards & CSS to style, Javascript to create the logic of the cards being flipped & unflipped & reset once they were not a match.
+
+## Lessons Learned
+I learned alot with this project such as exsactly how many steps needed to run a game like this, i was missing some of the logic in the beginning trying to recreate this project with pieces with a previous project called Tic tac toe. There were alot of changes such as making a memory system that remembers the cards unflipped & setting a time out to not break the games logic are some of the examples i found interesting.
+
+
+## Examples
+![Image Alt Text](./img/match.PNG)
+
+
+If you want to see more of my work, feel free to explore my portfolio! [GitHub](https://github.com/Michaelariasdls).
diff --git a/cat.avif b/cat.avif
diff --git a/cat2.jpg b/cat2.jpg
diff --git a/cat3.jpg b/cat3.jpg
diff --git a/cat4.jpg b/cat4.jpg
diff --git a/cat5.png b/cat5.png
diff --git a/cat6.webp b/cat6.webp
diff --git a/cat7.jpg b/cat7.jpg
diff --git a/cat8.jpg b/cat8.jpg
diff --git a/codioful-formerly-gradienta-LeG68PrXA6Y-unsplash.jpg b/codioful-formerly-gradienta-LeG68PrXA6Y-unsplash.jpg
diff --git a/dog.jpg b/dog.jpg
diff --git a/dog2.jpg b/dog2.jpg
diff --git a/dog3.jpg b/dog3.jpg
diff --git a/dog4.jpg b/dog4.jpg
diff --git a/dog4.webp b/dog4.webp
diff --git a/dog6.jpg b/dog6.jpg
diff --git a/dog8.jpg b/dog8.jpg
diff --git a/dogg.jpg b/dogg.jpg
diff --git a/img/match.PNG b/img/match.PNG
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<h1>CAT's & Dog's Card game!</h1>
+<body>
+    <div class="memory-game">
+        <div class="memory-card" data-framework="action">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="dog.jpg">
+        </div>
+        <div class="memory-card" data-framework="action">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="dog.jpg">
+        </div>
+        <div class="memory-card" data-framework="car">
+            <img class="front-face" src="cat2.jpg">
+            <img class="back-face" src="dogg.jpg">
+        </div>
+        <div class="memory-card" data-framework="car">
+            <img class="front-face" src="cat2.jpg">
+            <img class="back-face" src="dogg.jpg">
+        </div>
+        <div class="memory-card" data-framework="fat">
+            <img class="front-face" src="cat3.jpg">
+            <img class="back-face" src="dog3.jpg">
+        </div>
+        <div class="memory-card" data-framework="fat">
+            <img class="front-face" src="cat3.jpg">
+            <img class="back-face" src="dog3.jpg">
+        </div>
+        <div class="memory-card" data-framework="ced">
+            <img class="front-face" src="cat4.jpg">
+            <img class="back-face" src="dog6.jpg">
+        </div>
+        <div class="memory-card" data-framework="ced">
+            <img class="front-face" src="cat4.jpg">
+            <img class="back-face" src="dog6.jpg">
+        </div>
+        <div class="memory-card" data-framework="ded">
+            <img class="front-face" src="cat5.png">
+            <img class="back-face" src="dog8.jpg">
+        </div>
+        <div class="memory-card" data-framework="ded">
+            <img class="front-face" src="cat5.png">
+            <img class="back-face" src="dog8.jpg">
+        </div>
+        <div class="memory-card" data-framework="dawww">
+            <img class="front-face" src="cat6.webp">
+            <img class="back-face" src="dog4.jpg">
+        </div>
+        <div class="memory-card" data-framework="dawww">
+            <img class="front-face" src="cat6.webp">
+            <img class="back-face" src="dog4.jpg">
+        </div>
+        <!-- <div class="memory-card">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="screenshot-2020-10-14-at-155205.png">
+        </div>
+        <div class="memory-card">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="screenshot-2020-10-14-at-155205.png">
+        </div>
+        <div class="memory-card">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="screenshot-2020-10-14-at-155205.png">
+        </div>
+        <div class="memory-card">
+            <img class="front-face" src="cat.avif">
+            <img class="back-face" src="screenshot-2020-10-14-at-155205.png">
+        </div> -->
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
+
+
+
+ <!-- <div id="gameContainer">
+        <h1>Tic Tac Toe</h1>
+        <div id="cellContainer">
+            <div cellIndex="0" class="cells"></div>
+            <div cellIndex="1" class="cells"></div>
+            <div cellIndex="2" class="cells"></div>
+            <div cellIndex="3" class="cells"></div>
+            <div cellIndex="4" class="cells"></div>
+            <div cellIndex="5" class="cells"></div>
+            <div cellIndex="6" class="cells"></div>
+            <div cellIndex="7" class="cells"></div>
+            <div cellIndex="8" class="cells"></div>
+            <div cellIndex="9" class="cells"></div>
+            <div cellIndex="10" class="cells"></div>
+            <div cellIndex="11" class="cells"></div>
+            <div cellIndex="12" class="cells"></div>
+            <div cellIndex="13" class="cells"></div>
+            <div cellIndex="14" class="cells"></div>
+            <div cellIndex="15" class="cells"></div>
+
+
+        </div>
+        <button id="restart">Restart</button>
+        <h2 id="statusText"></h2>
+    </div>
diff --git a/index.js b/index.js
@@ -0,0 +1,244 @@
+//refer to previous project & use Tic tac sort logic, create an array for all cells & loop through 
+//game is one player 
+//create a array of all images that hold a cell
+
+//maybe loop through the array/of cells & find that 2 are matching 
+
+//user has to match to images/cells to keep unless they flip
+// let cell = document.querySelectorAll(".cells");
+// let restart = document.getElementById("restart");
+// restart.addEventListener("click", clearButton);
+
+
+
+
+// Video that guided me through some of the logic with matching cards such as rotating/transforming cards & allowing a rule to not break logic from selecting cards quickly
+// https://www.youtube.com/watch?v=sId4aKhogac&list=PLLX1I3KXZ-YH-woTgiCfONMya39-Ty8qw&index=2
+
+
+//selecting the cards
+let cards = document.querySelectorAll('.memory-card');
+
+//function to detect flipped cards
+let hasFlippedCard = false;
+
+//end of flipping cards function to work with the action of locking the board to stop the next turn, to not break the logic of the game
+let turnEnd = false;          
+
+//selecting the two cards function   data-framework="aurelia" matching cards have this data framework to detect a match & test function
+let card1, card2;
+
+function flipCard(){                
+    if(turnEnd) return;           //Both are returning the function if the case is that the card has been flipped & the turn has been completed' aka a card selected, in this case it's false
+    if(this === card1) return;  //"this" refers to the container it is in the func, if "this" card is selecting the first card return the function of flipCard
+
+                                                    //"this"
+
+        this.classList.add('flip');
+
+        if(!hasFlippedCard) {                        //if the user HAS flipped card, cause it was set to a value of false before the *!*
+
+            hasFlippedCard = true;
+            card1 = this;                           //first card is = the first card flipped refering to this function
+        return                                      //if not return "this" refering to the method its in is the second card
+        }    
+        card2 = this;
+
+        checkForMatch();                            // at the end of the function flipCard running it calls the card match function to check if the two cards selected match
+    }
+
+function checkForMatch(){
+    let isMatch = card1.dataset.framework === card2.dataset.framework           // let the data match for cards not just images, in this case "car" , or 
+
+        isMatch ? disableCards() : unFlipCards();          //ternary statement asking if the dataset.framework matches yes? then disable those cards, no then unflip them back if they are not 
+}
+
+function checkForWin(){
+    const allCardsMatch = Array.from(cards).every(card=> card.classList.contains('flip'))
+
+    if (allCardsMatch) {
+        alert("winner!")
+    }
+}
+
+
+
+function disableCards(){                         //Disable card method, removing the smurf's so the ability to click is not possible & the run function of flip card is ran to flip it back over
+    card1.removeEventListener('click', flipCard);
+    card2.removeEventListener('click', flipCard);
+
+    resetBoard();                               // calling to Reset the board after card selected arent a match to continue the game
+}
+
+function unFlipCards(){                         //
+    turnEnd = true;
+
+    setTimeout(() => {                          //set a time out on cards to stop logic from breaking from selecting to fast new cards, letting the cards currently selected take a 1.5s stop
+        card1.classList.remove('flip');
+        card2.classList.remove('flip');
+
+        resetBoard();                           //calling resetBoard function after the end of the turn & pausing for a second to unflip the cards back that were not a match 
+    }, 1500);
+}
+
+function resetBoard(){
+    [hasFlippedCard, turnEnd] = [false, false];    //array's & their value's this was interesting to see i did not know you could make two array's & assign them  
+    [card1, card2] = [null, null];                          
+}
+
+(function shuffle() {
+    cards.forEach(card => {                                     //shuffling all cards to a random location, since images were predetermined by html location, this creates a random number order
+        let randomPos = Math.floor(Math.random() * 12);
+        card.style.order = randomPos;
+    });
+})();
+
+
+cards.forEach(card => card .addEventListener("click", flipCard))
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//AT2
+
+
+// const emoji = ["a", "b", "c", "d", "e", "f", "a1", "b2", "c3", "d4", "e5", "f6", "aa", "bb", "cc", "dd"]
+
+// let shuffle = emoji.sort(() => (Math.random() > .5) ? 2: -1);
+// for( var i =0; i<emoji.length; i++){
+//     let box = document.createElement('div')    //doesn't apply to me since i have cells
+//     box.className = 'item';
+//     box.innerHTML = shuffle[i]
+
+//     box.onclick = function(){
+//         this.classList.add('boxOpen')
+//         setTimeout(function(){
+//             if(document.querySelectorAll(".boxOpen").length > 1){
+//                 if(document.querySelector(".boxOpen")[0].innerHTML ==
+//                 document.querySelector(".boxOpen")[1].innerHTML)
+//                 document.querySelectorAll(".boxOpen")[0].classList.add('boxMatch')
+//                 document.querySelectorAll(".boxOpen")[1].classList.add('boxMatch')
+//                 document.querySelectorAll(".boxOpen")[1].classList.remove('boxMatch')
+//                 document.querySelectorAll(".boxOpen")[1].classList.remove('boxMatch')
+
+//                 if(document.querySelectorAll(".boxMatch").length == emoji.length){
+//                     alert('win')
+//                 }else{
+//                     document.querySelectorAll(".boxOpen")[1].classList.remove('boxMatch')
+//                     document.querySelectorAll(".boxOpen")[0].classList.remove('boxMatch')
+//                 }
+//             }
+//         },500
+//     }
+
+//     document.querySelector('.game').appendChild(box);
+// }
+
+
+//AT1
+
+// let img = ["a", "v", "v", "a", "d", "d", "t"];
+// let 
+
+// let cell = document.querySelectorAll(".cells");
+// let restart = document.getElementById("restart");
+// restart.addEventListener("click", clearButton);
+
+
+// cell = Array.from(cell);
+
+// function clearButton(){
+//     cell.forEach(element => {
+//         element.innerText = ""
+//     })
+//   }
+
+// cell.forEach(element => {
+//     element.addEventListener("click", () => {
+//         if (element.innerText !== "") {
+//             return;
+//         }
+
+//         const boardGame = new Board();
+//         element.innerText = currentPlayer;
+
+//         boardGame.checkDraw()
+//         boardGame.testWinner()
+
+//         // document.createElement()
+
+//         currentPlayer = currentPlayer === playerOne ? playerTwo: playerOne
+//       })})
+
+//         class Board {
+//                 checkDraw() {
+//                     let finished = cell.every((element, index) => cell[index].innerText == "x" || cell[index].innerText == "o")
+
+//                     if(finished){
+//                       document.querySelector("#statusText").innerText = `It is a draw!` // Insert text to show who won
+//                       console.log('testerr')
+//                     }
+//                   }   
+
+
+//          testWinner() {   //this applies to the first combo of win conditions
+//             console.log('.');
+//             //first sol
+//             if (cell[0].innerText == currentPlayer && cell[1].innerText == currentPlayer && cell[2].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`
+//             }
+
+//              else if (cell[3].innerText == currentPlayer && cell[4].innerText == currentPlayer && cell[5].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`
+//              }
+
+//              else if (cell[6].innerText == currentPlayer && cell[7].innerText == currentPlayer && cell[8].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`
+//              }
+//              else if (cell[0].innerText == currentPlayer && cell[3].innerText == currentPlayer && cell[6].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`      
+//              }
+//              else if (cell[1].innerText == currentPlayer && cell[4].innerText == currentPlayer && cell[7].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`        
+//              }
+//              else if (cell[2].innerText == currentPlayer && cell[5].innerText == currentPlayer && cell[8].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`      
+//              }
+//              else if (cell[0].innerText == currentPlayer && cell[4].innerText == currentPlayer && cell[8].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`   
+//              }
+//              else if (cell[2].innerText == currentPlayer && cell[4].innerText == currentPlayer && cell[6].innerText == currentPlayer) {
+//                 document.querySelector("#statusText").innerText = `${currentPlayer} Wins YAAY!`
+//                 } 
+//             }
+//         }
+
+
+
+//     const boardGame = new Board();
diff --git a/screenshot-2020-10-14-at-155205.png b/screenshot-2020-10-14-at-155205.png