From 71883dea7dfc922680a7a7ba7ede390775295709 Mon Sep 17 00:00:00 2001 From: Rafa Date: Mon, 3 Nov 2025 21:49:22 +0100 Subject: [PATCH 1/3] Iteraton 1 solved --- SpecRunner.html | 2 +- index.html | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/SpecRunner.html b/SpecRunner.html index a6b4937e7..d21ab3652 100644 --- a/SpecRunner.html +++ b/SpecRunner.html @@ -6,7 +6,7 @@ - + diff --git a/index.html b/index.html index 9386faaf4..85f9edbe0 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -19,5 +20,7 @@

Score

+ + From c579e184c63199741f471787662c9f604a844812 Mon Sep 17 00:00:00 2001 From: Rafa Date: Tue, 4 Nov 2025 17:58:33 +0100 Subject: [PATCH 2/3] Solved Iteration 1 and 2 --- src/memory.js | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/memory.js b/src/memory.js index f6644827e..87b6063f3 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,40 @@ 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 + shuffleCards(cards) { + if(!cards) { + return undefined; + } + + for (let i = cards.length - 1; i > 0; i--) { + const randomIndex = Math.floor(Math.random() * (i + 1)); + [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]]; + } + + return cards; } checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked++; + + if (card1 === card2) { + this.pairsGuessed++; + return true; + } + + return false; } checkIfFinished() { - // ... write your code here + if (this.pairsGuessed >= 8) { + return true; + } + + return false; } -} +} \ No newline at end of file From bfdfd1b0608d5a5c182b643c13bf5da123c17ba1 Mon Sep 17 00:00:00 2001 From: Rafa Date: Tue, 4 Nov 2025 23:11:39 +0100 Subject: [PATCH 3/3] feat: add random method and solved iteration 3 --- src/index.js | 38 ++++++++++++++++++++++++++++++++++---- src/memory.js | 4 ++-- styles/style.css | 12 ++++++++++++ 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 37f3a672d..1325fdeb5 100644 --- a/src/index.js +++ b/src/index.js @@ -26,10 +26,11 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); +const cardsShusffle = memoryGame.shuffleCards(cards); window.addEventListener('load', (event) => { let html = ''; - memoryGame.cards.forEach((pic) => { + cardsShusffle.forEach((pic) => { html += `
@@ -38,14 +39,43 @@ window.addEventListener('load', (event) => { `; }); + function hiddenCards() { + document.querySelectorAll('.card').forEach((card) => { + card.classList.remove('turned'); + }); + } + + function scoreTotal() { + document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked; + document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed; + + if (memoryGame.checkIfFinished()) { + document.getElementById('memory-board').innerHTML = "

YOU WON!!!

"; + } + } + // Add all the divs to the HTML document.querySelector('#memory-board').innerHTML = html; + scoreTotal(); + // 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}`); + card.addEventListener('click', (e) => { + + card.classList.add('turned'); + memoryGame.pickedCards.push(card.dataset.cardName); + + if (memoryGame.pickedCards.length === 2) { + if (!memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1])) { + setTimeout(hiddenCards, 1000); + memoryGame.pairsGuessed = 0; + } + + memoryGame.pickedCards = []; + } + + scoreTotal(); }); }); }); diff --git a/src/memory.js b/src/memory.js index 87b6063f3..782b4289c 100644 --- a/src/memory.js +++ b/src/memory.js @@ -10,12 +10,12 @@ class MemoryGame { if(!cards) { return undefined; } - + for (let i = cards.length - 1; i > 0; i--) { const randomIndex = Math.floor(Math.random() * (i + 1)); [cards[i], cards[randomIndex]] = [cards[randomIndex], cards[i]]; } - + return cards; } diff --git a/styles/style.css b/styles/style.css index e56ddfe18..6bb186d18 100644 --- a/styles/style.css +++ b/styles/style.css @@ -88,3 +88,15 @@ p { font-size: 20px; text-align: center; } + +.win { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.win p { + font-size: 3rem; + font-weight: bold; +} \ No newline at end of file