Memory – Pair Game #445
Memory – Pair Game #445
Conversation
| @@ -0,0 +1,81 @@ | |||
| const cardsId = ["01", "02", "03", "04", "05", "06"]; | |||
|
|
||
| function createCard(id) { | ||
| let flipContainer = document.createElement("div"); | ||
| flipContainer.className = "flip-container"; |
There was a problem hiding this comment.
classList api is more flexible for styling
| let flipContainer = document.createElement("div"); | ||
| flipContainer.className = "flip-container"; | ||
| flipContainer.setAttribute("id", id); | ||
| gameField.append(flipContainer); |
| CheckPairs(); | ||
| } | ||
| } | ||
| function CheckPairs() { |
There was a problem hiding this comment.
probably it is a typo:)
| cardsArr.forEach((id) => createCard(id)); | ||
| } | ||
| function flipCard(event) { | ||
| if (arrOfFlippedCardsId.length == 0) { |
There was a problem hiding this comment.
| if (arrOfFlippedCardsId.length == 0) { | |
| if (!arrOfFlippedCardsId.length) { |
| firstFlippedContainer = event.target.closest(".flip-container"); | ||
| firstFlippedContainer.classList.add("clicked"); | ||
| arrOfFlippedCardsId.push(firstFlippedContainer.id); | ||
| } else if (arrOfFlippedCardsId.length == 1 && event.target.closest('.flip-container')!==firstFlippedContainer) { |
| } | ||
| function CheckPairs() { | ||
| if ( | ||
| arrOfFlippedCardsId[0] == arrOfFlippedCardsId[1] && |
There was a problem hiding this comment.
use destructuring
example
const [firstId, secondId] =arrOfFlippedCardsId
|
@okkkko Please let us know until 20:00 today if you are going to submit any changes into this PR before end of the day February 27. This would help us to plan mentors' limited capacity accordingly. |
|
Yes, I will, sorry for such a delay:( |
|
Thanks for the review! |
| function createCard(id) { | ||
| let flipContainer = document.createElement("div"); | ||
| flipContainer.classList.add("flip-container"); | ||
| flipContainer.setAttribute("id", id); | ||
| flipContainer.innerHTML = ` | ||
| <div class="flipper"> | ||
| <div class="front"> | ||
| <img src="img/paw.jpg"> | ||
| </div> | ||
| <div class="back"> | ||
| <img src="img/funny-cat_${id}.jpg"> | ||
| </div> | ||
| </div>`; | ||
| gameField.append(flipContainer); | ||
| } | ||
| function createField() { | ||
| cardsArr.sort(function () { | ||
| return 0.5 - Math.random(); | ||
| }); | ||
| cardsArr.forEach((id) => createCard(id)); | ||
| } |
There was a problem hiding this comment.
Adding elements to DOM from a loop is a bad practice. A browser will run reflow and repaint for every element in the loop. Instead, you can: 1. Use append method, which can add several elements in one operation 2. Create some wrapper, add your items to the wrapper and then add it to DOM. It will be one operation. 3. Clone current container. Add items to a container and then replace your old container with a new one. But be aware of event listeners. 4. Use innerHTML instead
| if (!arrOfFlippedCardsId.length) { | ||
| firstFlippedContainer = event.target.closest(".flip-container"); | ||
| firstFlippedContainer.classList.add("clicked"); | ||
| arrOfFlippedCardsId.push(firstFlippedContainer.id); | ||
| } else if ( | ||
| arrOfFlippedCardsId.length === 1 && | ||
| event.target.closest(".flip-container") !== firstFlippedContainer | ||
| ) { | ||
| secondFlippedContainer = event.target.closest(".flip-container"); | ||
| secondFlippedContainer.classList.add("clicked"); | ||
| arrOfFlippedCardsId.push(secondFlippedContainer.id); | ||
| checkPairs(); |
There was a problem hiding this comment.
DRY
const foo = (flippedContainer) => {
flippedContainer = event.target.closest(".flip-container");
flippedContainer.classList.add("clicked");
arrOfFlippedCardsId.push(flippedContainer.id);
}
...
foo(firstFlippedContainer)
foo(secondFlippedContainer)
Memory – Pair Game
Demo
Code base
The code is submitted in a dedicated feature branch.
Please, review.