Track your daily emotions with our free Yearly Mood Pixel Tracker. Visualize your emotional health, log daily moods, and generate a printable color grid online.
AI Generation Prompt
Technical Specification: Yearly Mood Pixel Tracker
Overview
A browser-based, client-side utility designed to help users visualize their emotional well-being using a color-coded pixel grid. The application allows users to assign moods (e.g., Happy, Stressed, Neutral) to specific dates throughout the year. Due to browser security constraints, all data handling is session-based with import/export functionality provided for data persistence.
Core Features
- Responsive Pixel Grid: A year-long grid view (or month-view toggle) where each day is an interactive pixel.
- Custom Mood Legend: Users define their own mood categories and associated color palettes (e.g., Green for Happy, Yellow for Anxious).
- State Management: In-memory tracking of mood selections for 365 days.
- Data Persistence (Manual): Import and Export functionality using JSON files to save and load progress since localStorage is blocked.
- Visual Summary: A dynamic dashboard showing percentages of each mood represented in the current selection.
UI/UX Design
- Aesthetic: Clean, minimalist "SaaS" aesthetic. High use of whitespace, soft rounded corners (reminiscent of modern iOS design), and subtle drop shadows.
- Color Palette: Focused on light, uplifting tones. Primary actions in slate blue, success states in sage green, danger states in soft coral.
- Layout:
- Header: Title and "Import/Export" action buttons.
- Sidebar: Left-hand management panel for defining mood labels and selecting colors.
- Main Area: Centered grid view of the year (or selected month). Each pixel is a square button with a hover effect.
- NO FOOTER: The interface must strictly end after the grid/summary section.
Interactions & Animations
- Hover States: Smooth scaling transformation (1.05x) on pixel hover.
- Selection: Simple click toggles the mood selector modal (custom DOM overlay, no
prompt()orconfirm()). - Transitions: All UI changes use CSS
transition: all 0.2s ease-in-outfor a fluid experience.
Developer Guidelines
- Architecture: One single
.htmlfile. CSS in<style>, JS in<script>. - Libraries: Tailwind CSS (via CDN) for styling; Lucide icons (via CDN) for iconography.
- Constraints:
- NO localStorage, sessionStorage, or Cookies: Data must be handled via object state. Use
window.URL.createObjectURLfor exports. - NO Popups: Use custom HTML modals for all user inputs.
- Responsive: Use CSS Grid with
repeat(auto-fit, ...)for the calendar layout to ensure it works on mobile and desktop. - Performance: Keep the DOM lightweight. Re-render only the affected grid cells upon state changes.
- NO localStorage, sessionStorage, or Cookies: Data must be handled via object state. Use
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the mood pixel calendar work?
The application provides a structured grid representing days of the year, allowing you to assign specific colors to different emotional states. By clicking on a date, you can select a mood category, instantly updating the pixel color in the grid to provide a visual representation of your emotional patterns over time. This system allows for quick, non-intrusive logging of your daily feelings without the need for long-form journaling. By glancing at the completed grid at the end of the month or year, you can identify recurring trends and fluctuations in your overall well-being.
Is my mood data saved automatically?
This application operates entirely in-memory within your browser and does not use cookies, local storage, or server-side databases to protect your privacy. This means that if you refresh the browser page, any unsaved progress will be cleared to ensure no trace of your data remains on the device. To persist your data, you must use the 'Export Data' function to save your grid as a JSON or CSV file to your local computer. When you return to the tool, you can simply use the 'Import Data' button to reload your previous progress and continue logging your moods seamlessly.
Why is it beneficial to track moods visually?
Visualizing mood data transforms abstract emotions into concrete patterns, helping you recognize triggers and periods of high or low mood more effectively. Seeing your year laid out in color-coded pixels provides an objective overview of your emotional journey that traditional text diaries cannot offer. This method is particularly effective for those looking to practice mindfulness and self-awareness. By observing the shifts in your mood grid, you can begin to correlate specific activities, habits, or life events with your overall happiness and stress levels.
Is this mood tracker secure to use?
Yes, this tool is 100% private and secure because it runs entirely client-side within your browser. No data, including your mood logs or personal patterns, is ever sent to a server, processed by third-party APIs, or stored on external databases. You are in complete control of your information. Because the app functions in a sandboxed environment, your data never leaves your computer unless you explicitly choose to download your exported file, ensuring maximum privacy for sensitive mental health tracking.
