From 932de0df1baad7cc160a708188f95ba26667eba5 Mon Sep 17 00:00:00 2001 From: Ama Williams <53152990+Tetsewa@users.noreply.github.com> Date: Tue, 6 Feb 2024 21:30:25 +0100 Subject: [PATCH 1/6] do iteration 1 and 2.1 --- index.html | 4 ++++ src/memory.js | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9386faaf4..f3b833475 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -19,5 +20,8 @@

Score

+ + + diff --git a/src/memory.js b/src/memory.js index f6644827e..9196f012c 100644 --- a/src/memory.js +++ b/src/memory.js @@ -2,11 +2,15 @@ class MemoryGame { constructor(cards) { this.cards = cards; // add the rest of the class properties here + this.pickedCards=[]; + this.pairsClicked=0; + this.pairsGuessed=0; } shuffleCards() { // ... write your code here - } + this.cards.sort{} + } checkIfPair(card1, card2) { // ... write your code here From 7f0678e6073b77362e3c2fef0827398bb22d4bce Mon Sep 17 00:00:00 2001 From: Ama Williams <53152990+Tetsewa@users.noreply.github.com> Date: Wed, 7 Feb 2024 20:35:38 +0100 Subject: [PATCH 2/6] add iteration 1 and 2.2.3 --- src/memory.js | 41 +++++++++++++++++++++++++++++++++++------ 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/src/memory.js b/src/memory.js index 9196f012c..19add26d2 100644 --- a/src/memory.js +++ b/src/memory.js @@ -6,17 +6,46 @@ class MemoryGame { this.pairsClicked=0; this.pairsGuessed=0; } - +//Iteration 2.2 shuffleCards() { // ... write your code here - this.cards.sort{} - } + //should return the shuffled (mixed) array of cards-NOT WORKING + const shuffle = (cards) =>{ + let oldElement; + for (let i = cards.length - 1; i > 0; i--) { + let rand = Math.floor(Math.random() * (i + 1)); + oldElement = cards[i]; + cards[i] = cards[rand]; + cards[rand] = oldElement; + } + return cards; + } + } checkIfPair(card1, card2) { - // ... write your code here - } + this.pairsClicked++ + if(card1.name===card2.name){ + this.pairsGuessed++ + return true + } + + // else { + + + // return false} + + } + checkIfFinished() { - // ... write your code here + if(this.pairsGuessed===0){ + return false + } + if(this.pairsGuessed===this.cards.length/2){ + return true + } + else { + return false + } } } From 7bcd94527c11c5fd5ab4e3e3d592e8bd694359ff Mon Sep 17 00:00:00 2001 From: Ama Williams <53152990+Tetsewa@users.noreply.github.com> Date: Wed, 7 Feb 2024 21:24:30 +0100 Subject: [PATCH 3/6] add iteration 1 and 2.2.3 --- src/memory.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/memory.js b/src/memory.js index 19add26d2..979988f71 100644 --- a/src/memory.js +++ b/src/memory.js @@ -10,10 +10,11 @@ class MemoryGame { shuffleCards() { // ... write your code here //should return the shuffled (mixed) array of cards-NOT WORKING + let cardsArray=[]; const shuffle = (cards) =>{ let oldElement; for (let i = cards.length - 1; i > 0; i--) { - let rand = Math.floor(Math.random() * (i + 1)); + let rand = Math.floor(Math.random() * (i +1)); oldElement = cards[i]; cards[i] = cards[rand]; cards[rand] = oldElement; @@ -29,10 +30,10 @@ class MemoryGame { return true } - // else { - + - // return false} + + } From 91a0041f651fe507cb57b83d2a0f0e4807fbb652 Mon Sep 17 00:00:00 2001 From: Ama Williams <53152990+Tetsewa@users.noreply.github.com> Date: Fri, 9 Feb 2024 21:49:41 +0100 Subject: [PATCH 4/6] solved last iteration --- index.html | 7 ++++-- src/index.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++- src/memory.js | 39 ++++++++++++++-------------- 3 files changed, 94 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index f3b833475..74ea9d9d3 100644 --- a/index.html +++ b/index.html @@ -17,11 +17,14 @@

Score

Pairs clicked: 0

Pairs guessed: 0

+
- - + + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..dd8913c73 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,6 @@ + + + const cards = [ { name: 'aquaman', img: 'aquaman.jpg' }, { name: 'batman', img: 'batman.jpg' }, @@ -26,6 +29,7 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); +let isProcessing= false; window.addEventListener('load', (event) => { let html = ''; @@ -41,11 +45,75 @@ window.addEventListener('load', (event) => { // Add all the divs to the HTML document.querySelector('#memory-board').innerHTML = html; + const pairsClicked=document.querySelector("#pairs-clicked") + const pairsGuessed=document.querySelector("#pairs-guessed") + // Bind the click event of each element to a function document.querySelectorAll('.card').forEach((card) => { card.addEventListener('click', () => { // TODO: write some code here - console.log(`Card clicked: ${card}`); + if (isProcessing){ + return; + } + Element.classList.add("turned") + memoryGame.pickedCards.push(card) + + memoryGame.pairsClicked++; + pairsClicked.innerHTML=memoryGame.pairsClicked; + + if (memoryGame.pickedCards.length===2){ + isProcessing=true; + + const check =memoryGame.checkIfPair( + memoryGame.pickedCards[0].getAttribute("data-card-name"); + memoryGame.pickedCards[1].getAttribute("data-card-name"); + ); + + if (check){ + const finish=memoryGame.checkIfFinished(); + if (finish){ + setTimeout(()=>{ + memoryGame.pairsClicked=0; + pairsClicked.innerHTML=memoryGame.pairsClicked; + + memoryGame.pairsGuessed=0; + pairsGuessed.innerHTML=memoryGame.pairsGuessed; + + document.querySelectorAll(".card").forEach((card) => { + card.classList.remove("turned") + }) + },1000) + + } + + pairsGuessed.innerHTML = memoryGame.pairsGuessed; + memoryGame.pickedCards=[] + + isProcessing=false; + + + } + else { + setTimeout(()=>{ + memoryGame.pickedCards[0].classList.remove("turned"); + memoryGame.pickedCards[1].classList.remove("turned"); + memoryGame.pickedCards= []; + + isProcessing=false; + }, 1000); + } + } + + //console.log(`Card clicked: ${card}`); }); + }); + }); + + + + + + + diff --git a/src/memory.js b/src/memory.js index 979988f71..a9bdc85af 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,40 +1,41 @@ class MemoryGame { constructor(cards) { this.cards = cards; + console.log(cards) // add the rest of the class properties here this.pickedCards=[]; this.pairsClicked=0; this.pairsGuessed=0; } -//Iteration 2.2 + //Iteration 2.2 shuffleCards() { // ... write your code here - //should return the shuffled (mixed) array of cards-NOT WORKING - let cardsArray=[]; - const shuffle = (cards) =>{ - let oldElement; - for (let i = cards.length - 1; i > 0; i--) { - let rand = Math.floor(Math.random() * (i +1)); - oldElement = cards[i]; - cards[i] = cards[rand]; - cards[rand] = oldElement; + //should return the shuffled (mixed) array of cards + let shuffle=0; + if (this.cards){ + for (let i=0;i Date: Fri, 9 Feb 2024 22:17:44 +0100 Subject: [PATCH 5/6] solved lab --- src/index.js | 12 ++++++++---- src/memory.js | 1 + 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index dd8913c73..b6956c8de 100644 --- a/src/index.js +++ b/src/index.js @@ -29,9 +29,10 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); + let isProcessing= false; -window.addEventListener('load', (event) => { +window.addEventListener("load", (event) => { let html = ''; memoryGame.cards.forEach((pic) => { html += ` @@ -55,18 +56,21 @@ window.addEventListener('load', (event) => { if (isProcessing){ return; } + //we turn the card and push it into the empty pickedCards array Element.classList.add("turned") memoryGame.pickedCards.push(card) + //Adds 1 to the pairsClicked and adds it in the HTML memoryGame.pairsClicked++; pairsClicked.innerHTML=memoryGame.pairsClicked; + //to check if the person has clicked 2 cards if (memoryGame.pickedCards.length===2){ isProcessing=true; - const check =memoryGame.checkIfPair( - memoryGame.pickedCards[0].getAttribute("data-card-name"); - memoryGame.pickedCards[1].getAttribute("data-card-name"); + const check =memoryGame.checkIfPair()( + memoryGame.pickedCards[0].getAttribute("data-card-name"), + memoryGame.pickedCards[1].getAttribute("data-card-name") ); if (check){ diff --git a/src/memory.js b/src/memory.js index a9bdc85af..4289b6f11 100644 --- a/src/memory.js +++ b/src/memory.js @@ -51,3 +51,4 @@ class MemoryGame { } } } + From 01e73be08035dde6cc37da323ef1b196282e4916 Mon Sep 17 00:00:00 2001 From: Ama Williams <53152990+Tetsewa@users.noreply.github.com> Date: Fri, 9 Feb 2024 22:35:49 +0100 Subject: [PATCH 6/6] solved lab --- src/index.js | 5 +++-- src/memory.js | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index b6956c8de..381ccd4d9 100644 --- a/src/index.js +++ b/src/index.js @@ -57,7 +57,7 @@ window.addEventListener("load", (event) => { return; } //we turn the card and push it into the empty pickedCards array - Element.classList.add("turned") + card.classList.add("turned") memoryGame.pickedCards.push(card) //Adds 1 to the pairsClicked and adds it in the HTML @@ -68,7 +68,7 @@ window.addEventListener("load", (event) => { if (memoryGame.pickedCards.length===2){ isProcessing=true; - const check =memoryGame.checkIfPair()( + const check =memoryGame.checkIfPair( memoryGame.pickedCards[0].getAttribute("data-card-name"), memoryGame.pickedCards[1].getAttribute("data-card-name") ); @@ -76,6 +76,7 @@ window.addEventListener("load", (event) => { if (check){ const finish=memoryGame.checkIfFinished(); if (finish){ + window.alert("Woooo-hoooooo!!!!! You won!👏👏👏👏👏👏👏👏"); setTimeout(()=>{ memoryGame.pairsClicked=0; pairsClicked.innerHTML=memoryGame.pairsClicked; diff --git a/src/memory.js b/src/memory.js index 4289b6f11..213b58241 100644 --- a/src/memory.js +++ b/src/memory.js @@ -27,14 +27,14 @@ class MemoryGame { checkIfPair(card1, card2) { this.pairsClicked++ - if(card1.name===card2.name){ + //if(card1.name===card2.name){ if(card1===card2){ this.pairsGuessed++ return true } else { return false - } + //} } }