diff --git a/index.html b/index.html index 9386faaf4..d665bed8e 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -19,5 +20,8 @@

Score

+ + + diff --git a/src/index.js b/src/index.js index 37f3a672d..efd2a3b9f 100644 --- a/src/index.js +++ b/src/index.js @@ -29,6 +29,9 @@ const memoryGame = new MemoryGame(cards); window.addEventListener('load', (event) => { let html = ''; + + memoryGame.shuffleCards(); + memoryGame.cards.forEach((pic) => { html += `
@@ -40,12 +43,62 @@ window.addEventListener('load', (event) => { // Add all the divs to the HTML document.querySelector('#memory-board').innerHTML = html; + // 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 (memoryGame.pairsGuessed === 12) { // it should be checked first before each click + const youWonBox = document.createElement("div") // where is this div created?? + youWonBox.className = "you-won" + const boxParagraph = document.createElement("p") + boxParagraph.innerHTML = "You won!" + youWonBox.appendChild(boxParagraph) + document.body.appendChild(youWonBox) + + return + } + + else { + + if (memoryGame.pickedCards.length < 2){ + card.classList.add("turned") + + memoryGame.pickedCards.push(card) + } + if (memoryGame.pickedCards.length === 2) { + + if (!memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1])){ // here is sth wrong - in debbugger the two identical cards return value false + + /* memoryGame.pickedCards[0].classList.remove("turned"); + memoryGame.pickedCards[1].classList.remove("turned"); */ + const card1 = memoryGame.pickedCards[0] + const card2 = memoryGame.pickedCards[1] + setTimeout(() => { //it doeasn't work on the first two cards, then starts working + card1.classList.remove("turned"); + card2.classList.remove("turned"); + }, 1000) + + } + + memoryGame.pickedCards = [] + } + + } +}) + }); - }); -}); + + + }) + + + + + + + + + + diff --git a/src/memory.js b/src/memory.js index f6644827e..71f1cd2c1 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,58 @@ 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 + if(this.cards == null) { + return undefined + } else { + + for (let i = this.cards.length - 1; i > 0; i--) { + const copyOfItemPositionBeingLooped = this.cards[i]; + const randomlySelectedPosition = Math.floor(Math.random() * i); + this.cards[i] = this.cards[randomlySelectedPosition]; + this.cards[randomlySelectedPosition] = copyOfItemPositionBeingLooped + } + + return this.cards + + /* const shuffledCards = [] + for (let i = this.cards.length - 1; i > 0; i--) { + let randomCard = this.cards[Math.floor(Math.random() * i)] + shuffledCards.push(randomCard) + this.cards.splice(this.cards.indexOf(randomCard), 1) + } + return shuffledCards */} } checkIfPair(card1, card2) { - // ... write your code here + console.log(card1, card2) + this.pairsClicked++ + let clickDisplayed = document.getElementById("pairs-clicked") + clickDisplayed.innerHTML = this.pairsClicked + +const pickedCard1 = card1.getAttribute("data-card-name") +const pickedCard2 = card2.getAttribute("data-card-name") + + if (pickedCard1 === pickedCard2) { + this.pairsGuessed++ + let guessDisplayed = document.getElementById("pairs-guessed") + guessDisplayed.innerHTML = this.pairsGuessed + return true + } else { + return false + } } checkIfFinished() { - // ... write your code here - } + if (this.pairsGuessed === this.cards.length/2) { + return true + } else { + return false + } + } } diff --git a/styles/style.css b/styles/style.css index e56ddfe18..f1fed7d07 100644 --- a/styles/style.css +++ b/styles/style.css @@ -88,3 +88,15 @@ p { font-size: 20px; text-align: center; } + +.you-won { + padding: 50px; + background-color: rgb(255, 99, 99); + border-radius: 8px; + position: absolute; + top: 50%; + left: 40% + + + +} \ No newline at end of file