diff --git a/index.html b/index.html index 9386faaf4..74ea9d9d3 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -16,8 +17,14 @@

Score

Pairs clicked: 0

Pairs guessed: 0

+
+ + + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..381ccd4d9 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' }, @@ -27,7 +30,9 @@ const cards = [ const memoryGame = new MemoryGame(cards); -window.addEventListener('load', (event) => { +let isProcessing= false; + +window.addEventListener("load", (event) => { let html = ''; memoryGame.cards.forEach((pic) => { html += ` @@ -41,11 +46,79 @@ 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; + } + //we turn the card and push it into the empty pickedCards array + card.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") + ); + + if (check){ + const finish=memoryGame.checkIfFinished(); + if (finish){ + window.alert("Woooo-hoooooo!!!!! You won!👏👏👏👏👏👏👏👏"); + 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 f6644827e..213b58241 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,54 @@ 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 shuffleCards() { // ... write your code here + //should return the shuffled (mixed) array of cards + let shuffle=0; + if (this.cards){ + for (let i=0;i