From ad81003a34cd60212bc5459aee8d2a6866a233c7 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma <165680680+AbhishekSharma-9@users.noreply.github.com> Date: Wed, 22 Oct 2025 18:57:31 +0530 Subject: [PATCH 1/2] Add files via upload --- .../MiniProjects/EmojiMoodTracker/index.html | 37 ++++++++ .../MiniProjects/EmojiMoodTracker/script.js | 38 ++++++++ .../MiniProjects/EmojiMoodTracker/style.css | 87 +++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html create mode 100644 Domains/Frontend/MiniProjects/EmojiMoodTracker/script.js create mode 100644 Domains/Frontend/MiniProjects/EmojiMoodTracker/style.css diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html b/Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html new file mode 100644 index 00000000..f9297deb --- /dev/null +++ b/Domains/Frontend/MiniProjects/EmojiMoodTracker/index.html @@ -0,0 +1,37 @@ + + + + + + Emoji Mood Tracker + + + +
+

😊 Emoji Mood Tracker

+

Select how you feel each day!

+ +
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+ + + + +
+ + + + diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/script.js b/Domains/Frontend/MiniProjects/EmojiMoodTracker/script.js new file mode 100644 index 00000000..e928bed1 --- /dev/null +++ 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 new file mode 100644 index 00000000..7fb094fe --- /dev/null +++ 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; +} From d8408e30e5498612a9b9ffd4b3757153d1756185 Mon Sep 17 00:00:00 2001 From: Abhishek Sharma <165680680+AbhishekSharma-9@users.noreply.github.com> Date: Wed, 22 Oct 2025 19:02:25 +0530 Subject: [PATCH 2/2] Create README.md --- .../MiniProjects/EmojiMoodTracker/README.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/EmojiMoodTracker/README.md diff --git a/Domains/Frontend/MiniProjects/EmojiMoodTracker/README.md b/Domains/Frontend/MiniProjects/EmojiMoodTracker/README.md new file mode 100644 index 00000000..8d044758 --- /dev/null +++ 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 + +Screenshot 2025-10-22 190101 + +## 🧑‍💻 Author + +**Project by:** [Abhishek Sharma](https://github.com/AbhishekSharma-9)