FrogHunter Memory game / Milestone 3 by Iryna-git-hub · Pull Request #11 · Paloma-Cardozo/FrogHunter

Iryna-git-hub · 2026-02-12T21:02:40Z

Hi, dear mentor!

In this PR, we have implemented the assignments according to Milestones 2 and 3 for the Memory game project.

What has been done:

Designed a database schema to store the cards.
Created the database and added sample cards.
Implemented a backend route that returns all cards from the database.
Refactored the frontend to fetch cards via our new API, replacing the hardcoded data.

Game logic implemented:

Only two cards can be flipped at a time.
If the cards match, they disappear.
Once all cards have disappeared, the player wins and the game ends.
After winning, the player can restart the game.

Additional features implemented:

Added a countdown timer to increase the challenge.
Introduced three levels to enhance gameplay variety.

Looking forward to your review.

Kind regards,
Paloma & Iryna

… into sprint2

ElizabethSh

Looks good! 👍
Areas for improvement:

You overcomplicate your code (see comments). Make it simple and easier to read.
You use inline styles a lot instead of using css. It also make your code difficult to read. Please use css instead of inline styles.
You use js for layout but you can use media queries in css and change layout depending on breakpoint.
Please create separate callback functions and use them in event listeners. It makes code easier to read.
Please don't use function before it's initialization.
Please create variables for 'magic numbers'.

ElizabethSh · 2026-02-13T10:25:45Z

+}
+
+.level-btn {
+  background: #10574d;


You could create variables for colors. Example:

:root { --primary-color: #3498db; } button { background-color: var(--primary-color); }

Thank you for your feedback! 😊

We’ve created CSS variables for all main colors and fonts in the code, so it’s now easier to maintain and adjust.

ElizabethSh · 2026-02-13T10:27:47Z

+
+const cardFrontImageSrc = "Images/lotus-flower.png";
+
+const levelSettings = {


what are these magic numbers 6, 8, 10 and 60, 90, 120?

Hi Lisa!
We’ve implemented the requested changes to remove magic numbers.

ElizabethSh · 2026-02-13T10:32:06Z

+  }
+
+  secondCard = card;
+  checkForMatch();


Please don't use function before initialization.

We reordered functions so checkForMatch() is fully defined before flipCard() calls it.

ElizabethSh · 2026-02-13T10:33:10Z

+}
+
+function setGridColumns(numberOfPairs = defaultNumberOfPairs) {
+  const isMobile = window.innerWidth <= 600;


What is 600? Please create variable for it.

Thank you for highlighting this. We implemented another solution using CSS:
.container {
grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 600px) {
.container {
grid-template-columns: repeat(var(--columns, 4), 1fr);
}
}

ElizabethSh · 2026-02-13T10:38:50Z

+  let columns;
+
+  if (isMobile) {
+    columns = 4;
+  } else {
+  if (numberOfPairs <= 8) columns = 4;
+  else if (numberOfPairs <= 10) columns = 5;
+  else columns = 6;
+  }


This looks too complicated and formatting is off. You could define default value for columns e.g.
let columns = 4;
and then change it in if statements. In this case you don't need to use 1 if.

I see what you mean. We improved the formatting:
function setGridColumns(numberOfPairs = defaultNumberOfPairs) {
let columns = 4;
if (numberOfPairs === 10) columns = 5;

gameBoard.style.setProperty("--columns", columns);
}

ElizabethSh · 2026-02-13T10:47:26Z

+    btn.addEventListener("click", () => {
+      currentPairs = parseInt(btn.dataset.pairs, 10);
+
+      levelButtons.forEach((level) => level.classList.remove("active"));


Why you use levelButtons inside 'specific' button?

We extracted the active state logic into a dedicated updateActiveLevel() function so the button handler only manages state changes and delegates the group UI update.

ElizabethSh · 2026-02-13T10:48:31Z

+  winner.style.display = "flex";
+}
+
+document.addEventListener("DOMContentLoaded", () => {


I encourage you to create a separate function for this callback.

We extracted the DOMContentLoaded callback into an initializeGame() function to improve readability and keep the event listener focused only on triggering initialization.

ElizabethSh · 2026-02-13T10:50:29Z

+  createGame(currentPairs);
+});
+
+window.addEventListener("resize", () => {


You could just use media queries in css and change layout depending on breakpoint. In this case you don't need setGridColumns function.

Thank you for the suggestion! Since we solved the setting of the column number for mobile through CSS, the eventListener is not needed and was deleted.

In our solution, number of columns depends on the screen size as well as on number of card pairs:
let columns = 4; (for 6 and 8 pairs)
if (numberOfPairs === 10) columns = 5;

ElizabethSh · 2026-02-13T10:53:50Z

+  lockBoard = true;
+
+  setTimeout(() => {
+    firstCard.style.transform = "scale(0.5) rotateY(180deg)";


Why you don't do it in css? You could create class fr that and add or remove it depending on condition.

Thank you for pointing that out. We’ve moved this property to CSS.

Iryna-git-hub · 2026-02-13T14:47:14Z

Hi @ElizabethSh,

Thank you so much for taking the time to review our pull request. Your feedback was really helpful. You pointed out exactly the areas where we had some doubts — like using CSS media queries instead of JS, the “magic numbers,” and refactoring the setGridColumns().
We also really appreciate those improvement hints — that meant a lot.
We’ve taken everything into account and are already working on improving the code.

…ation time

Co-authored-by: Lisa Shoshkina <liza.shoshkina@gmail.com>

jesusoterogomez · 2026-02-14T09:10:09Z

+    if (
+      lockBoard ||
+      card === firstCard ||
+      card.classList.contains("flipped") ||
+      card.classList.contains("matched")
+    )


This if statement block is duplicated here

I checked the current version, and the condition only exists inside flipCard().
I’ve grouped it into a single conditional for clarity.

jesusoterogomez · 2026-02-14T09:17:24Z

+}
+
+function showTimeout() {
+  lockBoard = true;


I think lockBoard = true isn't doing anything here, because resetBoard() flips it immediately to false again.

Good catch!! resetBoard() was implicitly flipping lockBoard back to false, which made lockBoard = true inside showTimeout() ineffective.
We refactored resetBoard() to clear only the selected cards, and now explicitly manage lockBoard in unflipCards(), createGame(), and disableCards().

jesusoterogomez · 2026-02-14T09:31:34Z

+    resetBoard();
+  };
+
+  secondCard.addEventListener("transitionend", handleTransitionEnd);


Tip for future projects :) - Don't need to change this now:

I can see why this works here, but I would encourage to not tie logic to animations changes.

The problem is that transitionend is not always "guaranteed" to fire.

There are browser settings like "prefer reduced motion" that will make animations not execute.

Battery saver (low battery on mobile devices, fx.) can cause animations to be skipped

other things like changing the focused tab to another tab in your browser might also make this event not run.

An alternative tradeoff here (less "elegant", but more reliable) would be to use a setTimeout that matches the duration of your expected animation.

Hi Jesús,

Thanks for the tip! We actually refactored the card-flipping logic in the current version. Instead of relying on transitionend, we now use setTimeout with the duration matching the expected animation (flipBackDelay for unflipping cards and matchedDelay for matched cards). This way, the game flow and resetBoard() work reliably even if animations are skipped due to browser settings, battery saver, or reduced motion preferences.

Just to let you know, your concern about transitionend not firing is already addressed in this version. 😊

Thanks for the guidance!

@jesusoterogomez thank you for explaining the drawbacks of this approach and for suggesting a more appropriate solution!

When I used the transitionend for this functionality, my reasoning was that relying on setTimeout and hardcoding it to match the CSS animation duration could make the logic fragile. For example, if the animation duration in CSS is 0.8 seconds, we would set the timeout to 800ms. But if someone later changes the animation duration in CSS to 1 second, the JavaScript logic would no longer be in sync and could break. That’s why I preferred using transitionend, so the logic reacts to the actual end of the animation rather than a fixed time value. @jesusoterogomez could you please share your thoughts on this?

Your logic makes sense here, but the tradeoff is that matching it to the CSS makes it easier to modify in one place, but at the cost of reliability.

Commonly, in bigger projects you would use an "animation library", that controls all animations via JS, which would eliminate this issue of matching JS and CSS variables.

I'm thinking of alternate approaches, and I think it's possible to solve it with JS and CSS variables:

I haven't tried this myself, but I believe this works, and it could be a neat and pretty elegant solution

Define your time variable in JS and set it as CSS variable.

// animation duration in ms const durationInMs = 800; const card = ... // reference to the element in HTML; // Set the CSS variable property card.style.setProperty( "--flip-duration", durationInMs + "ms" );

Use the property from the variable in CSS

.card { transition: transform var(--flip-duration) ease; }

Use the same JS variable for the timeout

... setTimeout(() => {...}, durationInMs); ...

That would make the same values match in CSS and JS, and only defined in one place.

jesusoterogomez · 2026-02-14T09:35:17Z

@@ -0,0 +1,94 @@
+# Postman – Test Scripts


Awesome that you included tests for your endpoints :)

Later, you'll also learn about testing frameworks and how you can do this within your project.

Thanks, Jesús! Looking forward to learning more about testing frameworks and integrating them directly into the project.

Paloma-Cardozo and others added 30 commits February 9, 2026 17:43

Initial backend integration and frontend adjustments

4bdcb72

Update backend docs, Postman test results, and project structure

b66db2b

Improve script.js to handle error response

b45ae90

Consolidate frontend and backend documentation into a single README

998afe1

Fix formatting in README.md tooling section

b8dab94

Adjust JavaScript for game logic

57a7b7f

Merge branch 'sprint2' of https://github.com/Paloma-Cardozo/FrogsHunter…

43924ff

… into sprint2

Adjust JavaScript for game logic

d2a9faf

Fix card layout

1f20312

Refactor database schema for cards table

7a0b188

Improve path resolution and standardize API error handlin

df6660b

Update package-lock.json

6c8a8f5

Improve winner message overlay

cb20ecc

Document Postman API tests and attach response screenshots

28a05e8

Clarify project structure and Postman evidence in README

c55ea08

Hide matched cards visually to comply with project brief

7a96f3f

Adjust winner overlay and smooth hide animation for matched cards

2ad0601

Adjust port to process.env.PORT and correct start command for Render

7eddaf9

Implement UI and game logic improvements

c36a38b

Add multiple difficulty levels with dynamic pair configuration

bb6bec5

Fix level buttons selection and event listeners

ad2f0a3

Changed minimum grid columns number to 4

69a5d68

added Timeout popup

d6ab49a

Implemented timeLeft variable and countdown timer

f8c1fb9

corrected Timeout text font-size

d23810d

favicon added

6f58a56

removed favicon background

8442707

corrected createGame() to unlock board after timeout window

c233f42

corrected number columns for mobile to 4

60989b4

changed padding for winner/timeout popup

3f191ae

Iryna-git-hub changed the base branch from sprint2 to sprint1 February 12, 2026 21:04

ElizabethSh approved these changes Feb 13, 2026

View reviewed changes

changed New Game buttons text

e99ee9c

Paloma-Cardozo and others added 5 commits February 14, 2026 00:38

Rebased sptint3 to countdown-timer branch.

8eb0499

Rebased sprint3 to countdown-timer branch

b3da3ba

Rebase sprint3 to countdown-timer branch

2f48e57

apdated disableCards() to wait transition end not related to CSS anim…

62b7144

…ation time

cleaned flipCard()

af4c48f

Iryna-git-hub force-pushed the countdown-timer branch from b34b5e7 to af4c48f Compare February 14, 2026 00:19

Iryna-git-hub and others added 4 commits February 14, 2026 01:38

Apply suggestion from @ElizabethSh

e84f475

Co-authored-by: Lisa Shoshkina <liza.shoshkina@gmail.com>

changed naming cardsApi -> cards

4303465

merged with updated origin

9671e73

added winner/timeout popup animation

faabbea

jesusoterogomez reviewed Feb 14, 2026

View reviewed changes


		const cardFrontImageSrc = "Images/lotus-flower.png";

		const levelSettings = {

Conversation

Iryna-git-hub commented Feb 12, 2026

Uh oh!

ElizabethSh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Iryna-git-hub commented Feb 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jesusoterogomez Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jesusoterogomez Feb 15, 2026 •

edited

Loading