Habbyt - Daily Habit Tracker

A modern, lightweight habit tracker built with vanilla HTML, CSS, and JavaScript.

Features

Core Functionality

• Create & Manage Habits - Add daily habits with specific times
• Daily Checklist - Mark habits complete each day
• Streak Tracking - Visual streak counter that encourages consistency
• Monthly Heatmap - See your progress at a glance
• Motivational Messages - Context-aware support that encourages without shaming
• Offline-First - Works completely offline with localStorage
• Mobile & Smartwatch Friendly - Responsive design for all devices including circular smartwatches
• Hamburger Menu - Settings accessible from top navigation

Design Philosophy

• Professional - Clean, modern SaaS-inspired interface
• Minimal - Focused, distraction-free experience
• Lightweight - Zero dependencies, pure JavaScript
• Persistent - All data saved locally to your browser
• Accessible - WCAG-compliant with keyboard navigation and reduced motion support

Project Structure

habbyt/
├── index.html          # HTML structure and components
├── styles.css          # Complete design system and layout
├── app.js              # Main application controller
├── utils.js            # Utilities for dates, storage, streaks
├── quotes.js           # Motivational quote system
└── README.md           # This file

Architecture

Data Model

{
  habits: [
    {
      id: "habit_1234_xyz",
      name: "Morning Run",
      time: "06:00",
      frequency: "daily",
      createdDate: "2026-01-24"
    }
  ],
  completionHistory: {
    "2026-01-24": ["habit_1234_xyz"],
    "2026-01-23": ["habit_1234_xyz"],
    // ...
  },
  lastLoadDate: "2026-01-24"
}

Core Components

1. StorageManager (utils.js)

Handles all localStorage operations:

• initStorage() - Initialize app data
• addHabit(habit) - Create new habit
• completeHabit(habitId, date) - Mark complete
• getHabitStats(habitId) - Get streak/completion data
• exportData() / importData() - Backup/restore

2. StreakEngine (utils.js)

Calculates streak metrics:

• calculateCurrentStreak(habitId) - Count consecutive days
• calculateBestStreak(habitId) - Find longest streak
• isMilestone(streak) - Detect milestone achievements (5, 10, 20, 30+ days)

3. DateUtils (utils.js)

All date operations:

• today() - Get today's date
• formatDate(date) - Convert to YYYY-MM-DD
• getDatesInMonth(year, month) - Get all dates in a month
• toReadable(dateStr) - Human-readable format

4. QuoteEngine (quotes.js)

Context-aware motivational messages:

• getMorningQuote() - Start of day
• getCompletionQuote() - After completing a habit
• getStreakQuote(streak) - Milestone achievements
• getMissedQuote() - Compassionate support when streak breaks

5. HabitApp (app.js)

Main application controller:

• init() - Bootstrap app
• addHabit() - User-facing add habit
• toggleHabit(habitId) - Mark complete/incomplete
• render() - Update all UI
• renderMonthlyView() - Show heatmap

Getting Started

Installation

No build process needed! Just open index.html in your browser.

# Option 1: Direct file
open index.html

# Option 2: Local server (Python 3)
python3 -m http.server 8000
# Then visit http://localhost:8000

# Option 3: Local server (Node.js)
npx http-server

Usage

1. Add a Habit - Enter name, select time, click "Add Habit"
2. Check Off Daily - Click checkbox to mark complete
3. Track Progress - View streaks, stats, and monthly heatmap
4. Get Motivated - Read supportive quotes that celebrate consistency

💡 How It Works

Daily Reset

• Checklist automatically resets each day
• Data persists across browser sessions
• Streaks continue if you complete a habit on consecutive days

Streak Calculation

• Current streak: Consecutive days (including today if completed)
• Best streak: Longest consecutive days in history
• Streak breaks: Only when a day is completely missed
• Milestone quotes: Shown at 5, 10, 20, 30+ day streaks

Motivational Quotes

Morning: Inspiring start-of-day messages Completion: Celebrate each habit completion Streak: Milestone achievements (every 5/10/20/30+ days) Missed: Compassionate support when streak breaks

All quotes are designed to:

• Celebrate progress
• Encourage growth
• Support setbacks
• Never shame or guilt

Design System

Color Palette

• Primary: Blue (#3b82f6) - Professional & trustworthy
• Primary Light: Light Blue (#60a5fa)
• Primary Dark: Dark Blue (#1e40af)
• Secondary: Emerald (#10b981) - Success & growth
• Accent: Amber (#f59e0b) - Highlights & CTAs
• Success: Emerald (#10b981) - Completion confirmation
• Heat Colors: Gray to Blue gradient - Activity levels

Typography

• Font: System stack (SF Pro Display, Segoe UI, etc.)
• Scale: 0.875rem to 2.5rem
• Weights: 300-700

Spacing System

• xs: 0.25rem
• sm: 0.5rem
• md: 1rem
• lg: 1.5rem
• xl: 2rem
• 2xl: 3rem

Responsive Breakpoints

• Desktop: Full layout with 70% width container
• Tablet (768px): Adjusted spacing, touch-friendly
• Mobile (480px): Optimized for smaller screens
• Smartwatch (500px and below): Reduced fonts, compact spacing
• Circular Smartwatch (350px and below): Circular modal design, minimal interface

Data Privacy

• 100% Client-Side: All data stored in browser's localStorage
• No Cloud: No tracking, no servers, no external APIs
• Offline-First: Works completely offline after first load
• Portable: Export data as JSON anytime

localStorage Structure

Data is stored in JSON format under key habbyt_data:

localStorage.getItem("habbyt_data");
// Returns: {"habits": [...], "completionHistory": {...}, "lastLoadDate": "..."}

Heatmap Visualization

• Each day shows as a cell in a 7-column grid (Sunday-Saturday)
• Color indicates completion status:
  • Gray: No habits completed
  • Blue: All habits completed for that day
• Month navigation with previous/next buttons
• Habits stack vertically below the heatmap on the same page

Example Workflow

1. Day 1 - Create habit "Morning Walk" at 6:00 AM
2. Day 1 - Check off at 7:00 AM - See encouragement quote
3. Day 2 - Check off - Streak: 2 days
4. Day 5 - Check off - Milestone quote!
5. Day 6 - Miss day - Compassionate quote + encouragement to restart
6. Day 7 - Check off - Back on track!
7. View Month - See heatmap showing pattern with gray and blue cells

Performance

• Zero Dependencies: No npm packages needed
• Tiny Bundle: ~25KB uncompressed (HTML + CSS + JS)
• Instant Load: No build process, no bundling
• Smooth Animations: GPU-accelerated CSS transitions
• Battery Efficient: Minimal JavaScript execution

Customization

Change Colors

Edit :root variables in styles.css:

:root {
  --color-primary: #3b82f6; /* Change to your color */
  --color-secondary: #10b981;
  /* ... */
}

Add More Quotes

Edit quotes.js - add entries to QUOTES object:

morning: [
  { text: "Your custom quote here", author: "Attribution" },
  // ...
];

Modify Timeline

All dates handled by DateUtils - centralized for easy changes

Troubleshooting

Data not saving?

• Check browser allows localStorage (Settings > Privacy)
• Ensure you're not in private/incognito mode
• Try exporting data to verify storage works

Quotes not appearing?

• Open browser console (F12) to check for errors
• Verify quotes.js loads correctly
• Check localStorage isn't full

Streaks not calculating?

• Completion history must have dates in YYYY-MM-DD format
• Check browser's date timezone settings
• Export data to inspect completionHistory structure

Layout issues on Safari?

• Webkit flexbox prefixes are included for compatibility
• Try clearing browser cache and reloading
• Update Safari to the latest version

License

Open source, free to use and modify.

Credits

Built for productivity and personal growth.

---

Remember: Consistency compounds. One day at a time.