Update index.html

index.html

@@ -626,4 +626,168 @@
             return habits.length > 0 ? Math.max(...habits.map(h => h.id)) + 1 : 1;
         }
 
-        habitForm.addEventListener('submit', (e) =>
+        habitForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const name = document.getElementById('habitName').value.trim();
+            const frequency = document.getElementById('habitFrequency').value;
+
+            if (!name) return;
+
+            habits.push({
+                id: getNextId(),
+                name,
+                streak: 0,
+                frequency,
+                progress: 0,
+                checked: false
+            });
+
+            saveData();
+            renderHabits();
+            updateStats();
+            habitForm.reset();
+            addHabitModal.classList.remove('active');
+        });
+
+        function renderHabits() {
+            habitList.innerHTML = habits.map(habit => `
+                <div class="habit-item">
+                    <div class="habit-check ${habit.checked ? 'checked' : ''}" data-id="${habit.id}">
+                        ${habit.checked ? '<i class="fas fa-check"></i>' : ''}
+                    </div>
+                    <div class="habit-info">
+                        <div class="habit-name">${habit.name}</div>
+                        <div class="habit-streak">
+                            <i class="fas fa-fire"></i> ${habit.streak} day streak
+                        </div>
+                    </div>
+                    <div class="habit-progress">
+                        <div class="progress-bar" style="width: ${habit.progress}%"></div>
+                    </div>
+                </div>
+            `).join('');
+
+            document.querySelectorAll('.habit-check').forEach(checkbox => {
+                checkbox.addEventListener('click', function() {
+                    const habit = habits.find(h => h.id === parseInt(this.dataset.id));
+                    habit.checked = !habit.checked;
+                    habit.streak = habit.checked ? habit.streak + 1 : Math.max(habit.streak - 1, 0);
+                    habit.progress = Math.min(Math.max(habit.progress + (habit.checked ? 20 : -20), 0), 100);
+                    saveData();
+                    updateStats();
+                });
+            });
+        }
+
+        function updateStats() {
+            const total = habits.length;
+            const completed = habits.filter(h => h.checked).length;
+            const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
+            const maxStreak = habits.reduce((max, h) => Math.max(max, h.streak), 0);
+
+            currentStreak.textContent = maxStreak;
+            habitsTracked.textContent = total;
+            completionRate.textContent = `${rate}%`;
+        }
+
+        // Calendar
+        function renderCalendar() {
+            calendarGrid.innerHTML = '';
+            const monthName = new Date(currentYear, currentMonthIndex).toLocaleString('default', { month: 'long', year: 'numeric' });
+            currentMonth.textContent = monthName;
+
+            // Day headers
+            ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].forEach(day => {
+                const header = document.createElement('div');
+                header.className = 'calendar-day-header';
+                header.textContent = day;
+                calendarGrid.appendChild(header);
+            });
+
+            // Days
+            const firstDay = new Date(currentYear, currentMonthIndex, 1).getDay();
+            const daysInMonth = new Date(currentYear, currentMonthIndex + 1, 0).getDate();
+
+            for (let i = 0; i < firstDay; i++) {
+                calendarGrid.appendChild(createEmptyDay());
+            }
+
+            for (let day = 1; day <= daysInMonth; day++) {
+                calendarGrid.appendChild(createCalendarDay(day));
+            }
+        }
+
+        function createEmptyDay() {
+            const day = document.createElement('div');
+            day.className = 'calendar-day';
+            return day;
+        }
+
+        function createCalendarDay(dayNumber) {
+            const day = document.createElement('div');
+            day.className = 'calendar-day';
+            
+            if (new Date(currentYear, currentMonthIndex, dayNumber).toDateString() === new Date().toDateString()) {
+                day.classList.add('today');
+            }
+
+            const number = document.createElement('div');
+            number.className = 'day-number';
+            number.textContent = dayNumber;
+            day.appendChild(number);
+
+            // Add habit dots based on actual data (example implementation)
+            const completedHabits = Math.random() > 0.5 ? Math.floor(Math.random() * 3) + 1 : 0;
+            if (completedHabits > 0) {
+                const dots = document.createElement('div');
+                dots.className = 'day-habits';
+                for (let i = 0; i < completedHabits; i++) {
+                    const dot = document.createElement('div');
+                    dot.className = 'day-habit-dot';
+                    dots.appendChild(dot);
+                }
+                day.appendChild(dots);
+            }
+
+            return day;
+        }
+
+        // Month navigation
+        prevMonthBtn.addEventListener('click', () => {
+            currentMonthIndex--;
+            if (currentMonthIndex < 0) {
+                currentMonthIndex = 11;
+                currentYear--;
+            }
+            renderCalendar();
+        });
+
+        nextMonthBtn.addEventListener('click', () => {
+            currentMonthIndex++;
+            if (currentMonthIndex > 11) {
+                currentMonthIndex = 0;
+                currentYear++;
+            }
+            renderCalendar();
+        });
+
+        // Theme toggle
+        themeToggle.addEventListener('click', () => {
+            document.body.classList.toggle('dark-mode');
+            if (document.body.classList.contains('dark-mode')) {
+                localStorage.setItem('theme', 'dark');
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            } else {
+                localStorage.setItem('theme', 'light');
+                themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+            }
+        });
+
+        // Modal controls
+        addHabitBtn.addEventListener('click', () => addHabitModal.classList.add('active'));
+        closeModal.addEventListener('click', () => addHabitModal.classList.remove('active'));
+        cancelHabit.addEventListener('click', () => addHabitModal.classList.remove('active'));
+        window.addEventListener('click', (e) => e.target === addHabitModal && addHabitModal.classList.remove('active'));
+    </script>
+</body>
+</html>