Add: [Frontend] Emoji Reaction Speed Test

Domains/Frontend/MiniProjects/EmojiReactionSpeedTest/README.md

@@ -0,0 +1,28 @@
+# Emoji Reaction Speed Test
+
+Develop an interactive reaction speed game where random emojis appear on screen and players must click the matching target emoji before time runs out. 
+
+## How to play
+
+**Goal:** Quickly click the single matching emoji from a scattered group before the timer runs out.
+
+**Scoring:** Faster clicks and building a streak earn high points. A streak activates a 1.5x combo multiplier for bonus score.
+
+**Game Over:** Losing all three lives (by wrong clicks or timeouts) ends the game.
+
+## Features
+
+- Random emoji generation with multiple decoy emojis on screen
+- Target emoji display with countdown timer for each round
+- Score tracking system with combo multipliers for consecutive hits
+- Multiple difficulty levels (easy, medium, hard) with varying speeds
+- Smooth animations and visual feedback for correct/incorrect clicks
+
+## Tech Stack
+
+HTML5
+CSS3
+JavaScript (Vanilla)
+
+## Future
+High scores, sound effects for hits/misses

Domains/Frontend/MiniProjects/EmojiReactionSpeedTest/index.css

@@ -0,0 +1,202 @@
+body {
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Poppins", sans-serif;
+  background: #253851;
+  color: #f3f4f6;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
+}
+#game-info {
+  text-align: center;
+  margin-top: 0px;
+  font-family: "Poppins", sans-serif;
+}
+
+#stats-header {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 5px 10px 10px 10px;
+  background: #374151;
+  border-bottom: 2px solid #4b5563;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+#target-area {
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+#target-display {
+  font-size: 3rem;
+  display: block;
+  margin-top: 5px;
+  border: 3px solid #60a5fa;
+  border-radius: 8px;
+  padding: 5px 10px;
+}
+
+#lives-combo,
+#stats {
+  text-align: center;
+}
+
+#combo-badge {
+  margin-left: 10px;
+  padding: 3px 8px;
+  background: #f59e0b;
+  color: black;
+  border-radius: 4px;
+  font-weight: bold;
+  animation: pulse 0.5s;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+#timer-container {
+  width: 100%;
+  height: 10px;
+  background: #4b5563;
+}
+
+#timer-bar {
+  height: 100%;
+  width: 100%;
+  background-color: #10b981;
+  transition: width 0.1s linear, background-color 0.3s;
+}
+
+#timer-bar.warning {
+  background-color: #f59e0b;
+}
+
+#timer-bar.danger {
+  background-color: #ef4444;
+}
+
+#game-area {
+  flex-grow: 1;
+  position: relative;
+  width: 90%;
+  max-width: 1000px;
+  height: 450px;
+  margin: 10px auto;
+  border: 2px dashed #4b5563;
+}
+
+.emoji-tile {
+  position: absolute;
+  font-size: 4rem;
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+
+.emoji-tile:hover {
+  transform: scale(1.1);
+}
+
+.correct-flash {
+  transform: scale(1.5) !important;
+  filter: drop-shadow(0 0 10px #10b981);
+  transition: transform 0.1s;
+}
+
+.shake-error {
+  animation: shake 0.5s;
+  filter: drop-shadow(0 0 10px #ef4444);
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-5px);
+  }
+  40%,
+  80% {
+    transform: translateX(5px);
+  }
+}
+
+#game-over-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+  text-align: center;
+}
+
+#final-stats p {
+  margin: 8px 0;
+  font-size: 1.1rem;
+}
+
+#restart-button,
+#start-button {
+  padding: 10px 20px;
+  margin-top: 20px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  background: #f59e0b;
+  border: none;
+  border-radius: 5px;
+  color: black;
+  font-weight: bold;
+}
+
+#restart-button:hover,
+#start-button:hover {
+  background: #d97706;
+}
+
+footer {
+  padding: 15px;
+  text-align: center;
+  background: #374151;
+  margin-top: auto;
+  font-family: "Poppins", sans-serif;
+}
+p {
+  margin: 5px 0;
+  text-align: center;
+}
+#controls-bar {
+  margin-bottom: 10px;
+}
+
+#controls-bar label {
+  margin-right: 10px;
+  font-weight: bold;
+  font-family: "Poppins", sans-serif;
+  color: #374151;
+}
+
+#controls-bar select {
+  padding: 5px 10px;
+  margin-right: 10px;
+  border-radius: 4px;
+  border: none;
+}

Domains/Frontend/MiniProjects/EmojiReactionSpeedTest/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Emoji Reaction Speed Test</title>
+    <link rel="stylesheet" href="index.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header id="stats-header">
+      <div id="game-info">
+        <h2>Emoji Reaction Speed Test</h2>
+        <p>
+          Test your reaction speed by clicking on the emoji as soon as it
+          appears!
+        </p>
+      </div>
+
+      <div id="target-area">Target: <span id="target-display">❓</span></div>
+      <div id="stats">
+        Score: <span id="score-display">0</span> | Streak:
+        <span id="streak-display">0</span> (<span id="best-streak-display"
+          >Best: 0</span
+        >)
+      </div>
+      <div id="lives-combo">
+        Lives: <span id="lives-display">❤️ ❤️ ❤️</span>
+        <span id="combo-badge" style="display: none">1.5x</span>
+      </div>
+    </header>
+    <div id="timer-container">
+      <div id="timer-bar"></div>
+    </div>
+    <main id="game-main">
+      <div id="game-area"></div>
+    </main>
+    <div id="game-over-screen" style="display: none">
+      <h2>Game Over! 😭</h2>
+      <div id="final-stats">
+        <p>Final Score: <span id="final-score">0</span></p>
+        <p>Best Streak: <span id="final-best-streak">0</span></p>
+        <p>Avg. Reaction Time: <span id="final-avg-time">N/A</span></p>
+        <p>Accuracy: <span id="final-accuracy">N/A</span></p>
+      </div>
+      <button id="restart-button">Play Again</button>
+    </div>
+
+    <footer>
+      <div id="controls-bar">
+        <label for="difficulty-select">Difficulty:</label>
+        <select id="difficulty-select">
+          <option value="Easy">Easy</option>
+          <option value="Medium" selected>Medium</option>
+          <option value="Hard">Hard</option>
+        </select>
+        <button id="start-button">Start Game</button>
+      </div>
+      <p>Made by Ananyaa</p>
+    </footer>
+    <script src="index.js"></script>
+  </body>
+</html>