Memory pair game #94

AsaMitaka · 2022-08-08T14:08:02Z

Memory pair game

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

zonzujiro · 2022-08-13T06:55:12Z

submissions/asaMitaka/Memory pair game/script.js

+class Card {
+    constructor(img, name, id, style) {
+        this.img = img;
+        this.name = name;
+        this.id = id;
+        this.backgroundImg = backImg;
+        this.style = style;
+    }
+}
+
+let card1 = new Card('https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', 'one', 1, 'cardItem');
+let card2 = new Card('https://a4files.ru/content/uploads/2017/07/cifra-2.jpg', 'two', 2, 'cardItem');
+let card3 = new Card('https://img.freepik.com/premium-vector/the-number-3-the-numbers-are-rosy-in-the-form-of-a-popular-childrens-game-pop-it-bright-letters-on-a-white-background-bright-numbers-on-a-white-background_422344-743.jpg', 'three', 3, 'cardItem');
+let card4 = new Card('https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', 'four', 4, 'cardItem');
+let card5 = new Card('https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', 'five', 5, 'cardItem');
+let card6 = new Card('https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', 'six', 6, 'cardItem');
+let card7 = new Card('https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', 'seven', 7, 'cardItem');
+let card8 = new Card('https://static3.depositphotos.com/1000695/119/i/450/depositphotos_1190337-stock-photo-figure-eight.jpg', 'eight', 8, 'cardItem');
+
+//arr of obj/ classes
+let arrOfCards = [card1, card2, card3, card4, card5, card6, card7, card8];


First - you don't need class here :) You are using it as data storage - no logic inside, no inheritance, nothing. So instead, you should use objects in such a case.
Second - instead of card{number} variables you can have array of raw data on which you will use Array#map, which will create array with cards for you.

zonzujiro · 2022-08-13T06:55:45Z

submissions/asaMitaka/Memory pair game/script.js

+let card4 = new Card('https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', 'four', 4, 'cardItem');
+let card5 = new Card('https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', 'five', 5, 'cardItem');
+let card6 = new Card('https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', 'six', 6, 'cardItem');
+let card7 = new Card('https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', 'seven', 7, 'cardItem');


cardItem looks like redundant as an argument - it's repeated everywhere.

zonzujiro · 2022-08-13T06:56:32Z

submissions/asaMitaka/Memory pair game/script.js

+let card4 = new Card('https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', 'four', 4, 'cardItem');
+let card5 = new Card('https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', 'five', 5, 'cardItem');
+let card6 = new Card('https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', 'six', 6, 'cardItem');
+let card7 = new Card('https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', 'seven', 7, 'cardItem');


Why you need seven as string and 7 as number? Same data :) Looks redundant.

zonzujiro · 2022-08-13T06:57:07Z

submissions/asaMitaka/Memory pair game/script.js

+let content = document.querySelector('.content');
+const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg';
+
+// creating obj/ class


Redundant comments - don’t use stuff ‘———————————‘ or “here I will sort my array”. The first one is ugly, second - redundant because the reviewer will understand that you do sort, from your code. The only situation in which you should use comments is when you need to describe why something is going on and this is 1% of all situations :)

zonzujiro · 2022-08-13T07:03:10Z

submissions/asaMitaka/Memory pair game/script.js

+
+// Clicked item change img
+function clickedItem(event) {
+    if (this === previousClicked) return;


Please avoid such things in 2022. :) While it's a completely legit and a working option, it's opaque while reading the code. The reader will need to go and find use cases of your function to understand what values can have this.

Instead, you can just use event.target.

zonzujiro · 2022-08-13T07:04:05Z

submissions/asaMitaka/Memory pair game/script.js

+    if (lockBoard) return;
+    if (!event.target.classList.contains('cardItem__front')) return; 
+
+    event.target.parentElement.classList.add('flip');


Don't use constructions like children[0], firstElementChild, parentNode, nextSibling, etc. In such a way, you rely on the order of DOM elements. So in case when you will have changed the design - your code will be broken. Which is bad, obviously. Use querySelector or closest, if in event, instead.

zonzujiro · 2022-08-13T07:04:57Z

submissions/asaMitaka/Object oriented JS/app.js

@@ -0,0 +1,169 @@
+// Enemies our player must avoid


Looks like a redundant file here. You should delete it.

zonzujiro · 2022-08-13T07:05:42Z

Ah, and use prettier please :)

…(), deleted this, deleted all comments in code, renamed function sameEvents to sameItems, add new line at the end of html file

zonzujiro · 2022-08-14T15:40:56Z

submissions/asaMitaka/Memory pair game/script.js

+let content = document.querySelector('.content');
+const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg';
+
+let arrOfCards = [


Common mistake - variable name. Please read review doc :)

zonzujiro · 2022-08-14T15:41:57Z

submissions/asaMitaka/Memory pair game/script.js

+let shuffledArr = shuffleArr([...arrOfCards, ...arrOfCards]);
+
+shuffledArr.forEach((el) => {
+    content.innerHTML += renderItem(el);


Common mistake - adding elements in the loop.

https://kottans.org/documentation/docs/doc/code-review/ please check the doc :)

zonzujiro · 2022-08-14T15:42:51Z

submissions/asaMitaka/Memory pair game/script.js

+let previousClicked = undefined;
+let currentClicked = undefined;
+let flipped = 0;
+let lockBoard = false;


Codestyle - boolean variables should be called with is, has, etc. In your case it should be isBoardLocked.

And lockBoard is verb. It's not a function, so it should be noun

zonzujiro · 2022-08-14T15:44:29Z

submissions/asaMitaka/Memory pair game/script.js

+    if (event.target === previousClicked) return;
+    if (lockBoard) return;
+    if (!event.target.classList.contains('cardItem__front')) return; 


You can make one if for this.

And I would move some checks out of function. No need to call listener in general if board was locked.

And function names should be verbs

zonzujiro · 2022-08-14T15:44:55Z

submissions/asaMitaka/Memory pair game/script.js

+    let parentElement = event.target.closest('.cardItem');
+    parentElement.classList.add('flip');
+
+    if (previousClicked === undefined) {


Just !previousClicked. It's shorter and will fit your needs

zonzujiro · 2022-08-14T15:46:04Z

submissions/asaMitaka/Memory pair game/script.js

+
+function renderItem(item) {
+    return `
+        <div class='cardItem' data-attribute='${item.id}'>


data-attribute to generic. Please use something more concrete

zonzujiro

One last thing. Also, please resolve outdated conversations

zonzujiro · 2022-08-15T18:20:24Z

submissions/asaMitaka/Memory pair game/script.js

-shuffledArr.forEach((el) => {
-    content.innerHTML += renderItem(el);
-});
+let shuffledCardList = shuffleArr([...cardsList, ...cardsList]).map((el) => content.innerHTML += renderItem(el));


Still same mistake - you adding elements inside loop. Don't do that :)

You should create string variable in which you will write value, accumulator. And then add it into the DOM in one call.

iiziumov added 2 commits August 8, 2022 16:53

js core code

24f2253

added memoryPairGame

5cbaacf

boxdxnx added the task-MPG label Aug 8, 2022

zonzujiro requested changes Aug 13, 2022

View reviewed changes

zonzujiro self-assigned this Aug 13, 2022

deleted Class, deleted parentElement search, add event.target.closest…

361dec2

…(), deleted this, deleted all comments in code, renamed function sameEvents to sameItems, add new line at the end of html file

AsaMitaka requested a review from zonzujiro August 14, 2022 12:40

zonzujiro requested changes Aug 14, 2022

View reviewed changes

fixed data-attr name, fixed variable names, remove forEach to map

eb2a0f6

zonzujiro requested changes Aug 15, 2022

View reviewed changes

add function renderAllItem

bb1a4b3

AsaMitaka requested a review from zonzujiro August 16, 2022 14:00

zonzujiro approved these changes Aug 17, 2022

View reviewed changes

zonzujiro merged commit 65ea6ed into kottans:main Aug 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Memory pair game #94

Memory pair game #94

AsaMitaka commented Aug 8, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro Aug 13, 2022

zonzujiro commented Aug 13, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro Aug 14, 2022

zonzujiro left a comment

zonzujiro Aug 15, 2022 •

edited

Loading

Memory pair game #94

Memory pair game #94

Conversation

AsaMitaka commented Aug 8, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zonzujiro commented Aug 13, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zonzujiro left a comment

Choose a reason for hiding this comment

zonzujiro Aug 15, 2022 • edited Loading

Choose a reason for hiding this comment

zonzujiro Aug 15, 2022 •

edited

Loading