Paloma-Cardozo · Iryna-git-hub · Feb 2, 2026 · Feb 2, 2026 · Feb 2, 2026 · Feb 2, 2026
diff --git a/Images/frog-hunter.png b/Images/frog-hunter.png
diff --git a/Images/frog.gif b/Images/frog.gif
diff --git a/Images/frog1.png b/Images/frog1.png
diff --git a/Images/frog10.png b/Images/frog10.png
diff --git a/Images/frog11.png b/Images/frog11.png
diff --git a/Images/frog12.png b/Images/frog12.png
diff --git a/Images/frog13.png b/Images/frog13.png
diff --git a/Images/frog14.png b/Images/frog14.png
diff --git a/Images/frog15.png b/Images/frog15.png
diff --git a/Images/frog16.png b/Images/frog16.png
diff --git a/Images/frog17.png b/Images/frog17.png
diff --git a/Images/frog18.png b/Images/frog18.png
diff --git a/Images/frog19.png b/Images/frog19.png
diff --git a/Images/frog2.png b/Images/frog2.png
diff --git a/Images/frog20.png b/Images/frog20.png
diff --git a/Images/frog3.png b/Images/frog3.png
diff --git a/Images/frog4.png b/Images/frog4.png
diff --git a/Images/frog5.png b/Images/frog5.png
diff --git a/Images/frog6.png b/Images/frog6.png
diff --git a/Images/frog7.png b/Images/frog7.png
diff --git a/Images/frog8.png b/Images/frog8.png
diff --git a/Images/frog9.png b/Images/frog9.png
diff --git a/Images/froggy.png b/Images/froggy.png
diff --git a/Images/lotus-flower.png b/Images/lotus-flower.png
diff --git a/README.md b/README.md
@@ -0,0 +1,76 @@
+# 🐸 Frog Hunter – Memory Game
+
+Frog Hunter is a browser-based memory game developed as part of the **Foundation Project at Hack Your Future**.
+
+The game is inspired by the classic Memory Game and challenges players to find all matching pairs of cards by flipping them two at a time.
+Our focus is on making the game work and building a smooth, intuitive, and enjoyable experience that encourages players to keep playing.
+
+This project is developed incrementally, following a sprint-based approach, where functionality, structure, and complexity grow step by step.
+
+---
+
+## 🎮 About the Game
+
+In Frog Hunter, players interact with a grid of cards showing frog-themed images.
+
+- Cards start face down
+- Players flip cards to reveal the images
+- Only two cards can be revealed at the same time
+- Matching cards remain revealed
+- Non-matching cards flip back after a short delay
+- The game ends once all matching pairs have been found
+- The timer starts from when the player clicks their first card
+- The counter shows how many times the player has revealed a card
+
+
+The game logic and interactions are designed to be clear, responsive, and easy to understand.
+
+---
+
+## 🛠️ Technologies & Approach
+
+This project is built using:
+
+- **HTML** for structure
+- **CSS** for layout and animations
+- **JavaScript** for game logic and DOM manipulation
+- **Git & GitHub** for version control and collaboration
+
+As part of the project milestones, the game evolves from a fully frontend-based implementation to a version that includes:
+
+- Fetching card data from a backend API
+- Storing card information in a database
+
+These steps are introduced progressively as the project advances through the sprints.
+
+---
+
+## 📂 Project Structure
+
+/frogsHunter
+│── index.html
+│── styles.css
+│── script.js
+
+The structure is intentionally simple, allowing us to focus on core concepts such as game logic, state handling, and user interaction.
+
+---
+
+## 👩🏻‍💻👩🏼‍💻 Team
+
+This project is developed as a pair-programming exercise, emphasizing collaboration, communication, and shared ownership of the codebase:
+
+- **Paloma Cardozo**
+- **Iryna Lopatina**
+
+---
+
+## 📌 Project Context & Milestones
+
+The project follows an iterative, sprint-based workflow:
+
+- **Sprint 1:** Frontend fundamentals, card interactions, layout, and animations
+- **Sprint 2:** Backend integration, API usage, and database-driven cards
+- **Sprint 3:** Complete game logic and additional features to enhance gameplay
+
+Each sprint builds on the previous one, taking the project from a simple interactive prototype to a fully playable memory game.
diff --git a/index.html b/index.html
@@ -3,137 +3,69 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Frog Hunter</title>
     <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
-    <div class="container">
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog1</h1>
-          </div>
-        </div>
-      </div>
-
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog2</h1>
-          </div>
-        </div>
-      </div>
-
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog3</h1>
-          </div>
-        </div>
-      </div>
-
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog4</h1>
-          </div>
-        </div>
-      </div>
 
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog1</h1>
-          </div>
-        </div>
-      </div>
+  <body>
+    <h1 class="title">
+      <img
+        src="Images/frog-hunter.png"
+        alt="Person dressed as a frog"
+        class="frog-icon"
+      />
+      Froggy Pairs
+      <img
+        src="Images/frog-hunter.png"
+        alt="Person dressed as a frog"
+        class="frog-icon"
+      />
+    </h1>
 
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog2</h1>
-          </div>
-        </div>
-      </div>
+    <h2 class="subtitle">Can you match all the frogs?</h2>
 
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog3</h1>
-          </div>
-        </div>
-      </div>
+    <div class="game">
+      <div class="controls">
+        <button class="button">
+          <img
+            src="Images/froggy.png"
+            alt="Happy frog icon"
+            class="frog-icon"
+          />
+          <span class="button-text">New Game</span>
+        </button>
 
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog4</h1>
-          </div>
+        <div class="state">
+          <span class="moves">Moves: 0</span>&nbsp;&middot;&nbsp;
+          <span class="timer">Time: 0min 0s</span>
         </div>
       </div>
 
-      <div class="flip-card">
-        <div class="flip-card-inner">
-          <div class="flip-card-front">
-            <img
-              src="lotus.png"
-              alt="Avatar"
-            />
-          </div>
-          <div class="flip-card-back">
-            <h1>Frog</h1>
-          </div>
-        </div>
+      <div class="container"></div>
+    </div>
+    <div
+      class="winner"
+      role="dialog"
+      aria-live="polite"
+      aria-modal="true"
+      hidden
+    >
+      <div class="winner-card">
+        <h2>YOU WIN!</h2>
+        <img src="Images/frog.gif" alt="Frog animation" class="frog-icon" />
+        <p class="winner-stats">
+          <span class="winner-moves">Moves: 0</span>
+          &nbsp;&middot;&nbsp;
+          <span class="winner-time">Time: 0min 0s</span>
+        </p>
+        <button id="new-game-btn" class="button">New Game</button>
       </div>
     </div>
+
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/lotus.png b/lotus.png