acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/README.md b/Domains/Frontend/MiniProjects/EmojiMoodTracker/README.md
@@ -0,0 +1,66 @@
+# 😊 Emoji Mood Tracker
+
+A simple and fun **frontend mini project** built using **HTML, CSS, and JavaScript**.  
+It allows users to select their daily mood using emojis and keeps track of it throughout the week — all saved locally in the browser!
+
+---
+
+## 🚀 Project Overview
+
+The **Emoji Mood Tracker** helps users record their mood for each day (Mon–Sun) by clicking on a day and selecting an emoji that represents how they feel.  
+All moods are saved using **localStorage**, so they persist even after refreshing or reopening the page.
+
+This project is perfect for beginners learning DOM manipulation, event handling, and browser storage.
+
+---
+
+## 🧠 Features
+
+- 🎭 Select a mood for each day of the week  
+- 💾 Automatically saves moods using **localStorage**  
+- 🧹 “Reset Tracker” button to clear data  
+- 📱 Responsive design  
+- ⚡ Lightweight — no libraries or frameworks  
+
+---
+
+## 🏗️ Tech Stack
+
+| Technology | Description |
+|-------------|-------------|
+| **HTML5** | Page structure |
+| **CSS3** | Styling & layout |
+| **JavaScript (ES6)** | Logic & interactivity |
+| **localStorage** | For saving user moods persistently |
+
+---
+
+## 📁 Folder Structure
+
+EmojiMoodTracker/
+│
+├── index.html # Main HTML file
+├── style.css # Styling and layout
+├── script.js # Core JavaScript logic
+└── README.md # Project documentation
+
+
+---
+
+## ⚙️ How It Works
+
+1. Click on any day (Mon–Sun).  
+2. Choose an emoji from the picker to represent your mood.  
+3. The selected emoji replaces the day name.  
+4. All data is saved locally using `localStorage`.  
+5. Click **Reset Tracker** to clear all moods.
+
+---
+
+## 🧩 Screenshots
+
+<img width="1919" height="1019" alt="Screenshot 2025-10-22 190101" src="https://github.com/user-attachments/assets/cf66ecce-9cc5-4b07-b79b-9765184eae02" />
+
+## 🧑‍💻 Author
+
+**Project by:** [Abhishek Sharma](https://github.com/AbhishekSharma-9) 
diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html b/Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Emoji Mood Tracker</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>😊 Emoji Mood Tracker</h1>
+    <p>Select how you feel each day!</p>
+
+    <div class="week">
+      <div class="day" data-day="Mon">Mon</div>
+      <div class="day" data-day="Tue">Tue</div>
+      <div class="day" data-day="Wed">Wed</div>
+      <div class="day" data-day="Thu">Thu</div>
+      <div class="day" data-day="Fri">Fri</div>
+      <div class="day" data-day="Sat">Sat</div>
+      <div class="day" data-day="Sun">Sun</div>
+    </div>
+
+    <div class="emoji-picker hidden">
+      <span>😄</span>
+      <span>🙂</span>
+      <span>😐</span>
+      <span>☹️</span>
+      <span>😭</span>
+    </div>
+
+    <button id="resetBtn">Reset Tracker</button>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/script.js b/Domains/Frontend/MiniProjects/EmojiMoodTracker/script.js
@@ -0,0 +1,38 @@
+const days = document.querySelectorAll(".day");
+const emojiPicker = document.querySelector(".emoji-picker");
+const resetBtn = document.getElementById("resetBtn");
+
+let selectedDay = null;
+const moods = JSON.parse(localStorage.getItem("moods")) || {};
+
+// Load saved moods
+days.forEach(day => {
+  const mood = moods[day.dataset.day];
+  if (mood) day.textContent = mood;
+});
+
+// Show emoji picker when clicking on a day
+days.forEach(day => {
+  day.addEventListener("click", () => {
+    selectedDay = day.dataset.day;
+    emojiPicker.classList.remove("hidden");
+  });
+});
+
+// When emoji is clicked
+emojiPicker.addEventListener("click", e => {
+  if (e.target.tagName !== "SPAN") return;
+  const emoji = e.target.textContent;
+  moods[selectedDay] = emoji;
+  localStorage.setItem("moods", JSON.stringify(moods));
+
+  const dayEl = document.querySelector(`[data-day="${selectedDay}"]`);
+  dayEl.textContent = emoji;
+  emojiPicker.classList.add("hidden");
+});
+
+// Reset tracker
+resetBtn.addEventListener("click", () => {
+  localStorage.removeItem("moods");
+  days.forEach(day => (day.textContent = day.dataset.day));
+});
diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/style.css b/Domains/Frontend/MiniProjects/EmojiMoodTracker/style.css
@@ -0,0 +1,87 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Poppins", sans-serif;
+  background: linear-gradient(135deg, #ffecd2, #fcb69f);
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  background: #fff;
+  padding: 25px 35px;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+  margin-bottom: 10px;
+}
+
+.week {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin: 20px 0;
+  flex-wrap: wrap;
+}
+
+.day {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.3s;
+  font-weight: bold;
+}
+
+.day:hover {
+  background: #d4d4d4;
+}
+
+.emoji-picker {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.emoji-picker span {
+  font-size: 1.8rem;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.emoji-picker span:hover {
+  transform: scale(1.2);
+}
+
+.hidden {
+  display: none;
+}
+
+#resetBtn {
+  margin-top: 20px;
+  background: #ff6f61;
+  border: none;
+  color: white;
+  padding: 8px 15px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+#resetBtn:hover {
+  background: #e0554b;
+}