When the "set reminder" at the bottom of the task is clicked it should produce something that the user can say yes or no and if yes the user should be able to click daily, weekly, monthly until the task is complete or deleted.

components/task-card.js

@@ -8,12 +8,12 @@ class TaskCard extends HTMLElement {
         const completed = this.getAttribute('completed') === 'true';
         const hasReminder = this.getAttribute('has-reminder') === 'true';
         const reminderStopped = this.getAttribute('reminder-stopped') === 'true';
+        const reminderFrequency = this.getAttribute('reminder-frequency');
         const createdAt = this.getAttribute('created-at');
         
         const createdDate = new Date(createdAt).toLocaleDateString();
         const timeAgo = this.getTimeAgo(createdAt);
-        
-        this.shadowRoot.innerHTML = `
+this.shadowRoot.innerHTML = `
             <style>
                 .task-card {
                     background: white;
@@ -156,16 +156,14 @@ class TaskCard extends HTMLElement {
                                 <span>${timeAgo}</span>
                             </div>
                         </div>
-                        
                         <div class="flex items-center justify-between">
                             <div class="flex gap-2">
                                 ${hasReminder && !reminderStopped ? 
-                                    '<span class="badge badge-reminder">Active Reminder</span>' : ''}
+                                    `<span class="badge badge-reminder">Active (${reminderFrequency || 'daily'})</span>` : ''}
                                 ${reminderStopped ? 
                                     '<span class="badge badge-stopped">Reminder Stopped</span>' : ''}
                             </div>
-                            
-                            <div class="flex items-center gap-1">
+<div class="flex items-center gap-1">
                                 ${!completed ? `
                                     <button class="action-btn reminder-btn ${hasReminder && !reminderStopped ? 'active' : ''}" 
                                             data-action="reminder" 

index.html

@@ -160,7 +160,6 @@
             <p class="text-gray-500">Add your first task to get started!</p>
         </div>
     </main>
-
     <!-- Email Preview Modal -->
     <div id="emailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
         <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-auto">
@@ -198,7 +197,64 @@
         </div>
     </div>
 
-    <!-- Components -->
+    <!-- Reminder Frequency Modal -->
+    <div id="reminderModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-2xl max-w-md w-full">
+            <div class="p-6 border-b border-gray-200">
+                <div class="flex justify-between items-center">
+                    <h3 class="text-xl font-bold text-gray-800">Set Reminder Frequency</h3>
+                    <button id="closeReminderModal" class="text-gray-500 hover:text-gray-700">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="p-6">
+                <p class="text-gray-600 mb-6">How often would you like to receive email reminders for this task?</p>
+                
+                <div class="space-y-3 mb-6">
+                    <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="daily">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="font-semibold text-gray-800">📅 Daily</p>
+                                <p class="text-sm text-gray-500">Receive reminders every day</p>
+                            </div>
+                            <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                        </div>
+                    </button>
+                    
+                    <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="weekly">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="font-semibold text-gray-800">📆 Weekly</p>
+                                <p class="text-sm text-gray-500">Receive reminders every week</p>
+                            </div>
+                            <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                        </div>
+                    </button>
+                    
+                    <button class="frequency-btn w-full text-left px-4 py-3 border-2 border-gray-200 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all" data-frequency="monthly">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="font-semibold text-gray-800">🗓️ Monthly</p>
+                                <p class="text-sm text-gray-500">Receive reminders every month</p>
+                            </div>
+                            <i data-feather="chevron-right" class="w-5 h-5 text-gray-400"></i>
+                        </div>
+                    </button>
+                </div>
+                
+                <div class="flex gap-3">
+                    <button id="cancelReminder" class="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                        Cancel
+                    </button>
+                    <button id="stopExistingReminder" class="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors hidden">
+                        Stop Reminder
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+<!-- Components -->
     <script src="components/navbar.js"></script>
     <script src="components/task-card.js"></script>
     

script.js

@@ -12,7 +12,6 @@ class TaskManager {
         this.updateStats();
         this.startReminderScheduler();
     }
-
     setupEventListeners() {
         // Add task
         document.getElementById('addTaskBtn').addEventListener('click', () => this.addTask());
@@ -32,15 +31,56 @@ class TaskManager {
             document.getElementById('emailModal').classList.add('hidden');
         });
 
-        // Close modal on outside click
+        // Reminder modal
+        document.getElementById('closeReminderModal').addEventListener('click', () => {
+            document.getElementById('reminderModal').classList.add('hidden');
+            this.currentReminderTaskId = null;
+        });
+
+        document.getElementById('cancelReminder').addEventListener('click', () => {
+            document.getElementById('reminderModal').classList.add('hidden');
+            this.currentReminderTaskId = null;
+        });
+
+        document.getElementById('stopExistingReminder').addEventListener('click', () => {
+            if (this.currentReminderTaskId) {
+                const task = this.tasks.find(t => t.id === this.currentReminderTaskId);
+                if (task) {
+                    task.hasReminder = false;
+                    task.reminderStopped = true;
+                    this.saveTasks();
+                    this.renderTasks();
+                    this.updateStats();
+                    this.showToast('Reminder stopped', 'info');
+                }
+            }
+            document.getElementById('reminderModal').classList.add('hidden');
+            this.currentReminderTaskId = null;
+        });
+
+        // Frequency buttons
+        document.querySelectorAll('.frequency-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const frequency = e.currentTarget.dataset.frequency;
+                this.setReminderFrequency(frequency);
+            });
+        });
+
+        // Close modals on outside click
         document.getElementById('emailModal').addEventListener('click', (e) => {
             if (e.target.id === 'emailModal') {
                 document.getElementById('emailModal').classList.add('hidden');
             }
         });
-    }
 
-    addTask() {
+        document.getElementById('reminderModal').addEventListener('click', (e) => {
+            if (e.target.id === 'reminderModal') {
+                document.getElementById('reminderModal').classList.add('hidden');
+                this.currentReminderTaskId = null;
+            }
+        });
+    }
+addTask() {
         const taskInput = document.getElementById('taskInput');
         const emailInput = document.getElementById('emailInput');
         const taskText = taskInput.value.trim();
@@ -111,22 +151,42 @@ class TaskManager {
                 return;
             }
             
+            this.currentReminderTaskId = id;
+            
             if (task.hasReminder && !task.reminderStopped) {
-                // Stop reminder
-                task.hasReminder = false;
-                task.reminderStopped = true;
-                this.showToast('Reminder stopped', 'info');
+                // Show stop reminder option
+                document.getElementById('reminderModal').classList.remove('hidden');
+                document.getElementById('stopExistingReminder').classList.remove('hidden');
+                document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'none');
             } else {
-                // Start reminder
-                task.hasReminder = true;
-                task.reminderStopped = false;
-                this.showToast('Reminder started! You\'ll receive email notifications every 30 seconds', 'success');
-                this.showEmailPreview(task);
+                // Show frequency selection
+                document.getElementById('reminderModal').classList.remove('hidden');
+                document.getElementById('stopExistingReminder').classList.add('hidden');
+                document.querySelectorAll('.frequency-btn').forEach(btn => btn.style.display = 'block');
             }
+        }
+    }
+
+    setReminderFrequency(frequency) {
+        if (!this.currentReminderTaskId) return;
+        
+        const task = this.tasks.find(t => t.id === this.currentReminderTaskId);
+        if (task) {
+            task.hasReminder = true;
+            task.reminderStopped = false;
+            task.reminderFrequency = frequency;
+            
+            const frequencyText = frequency === 'daily' ? 'daily' : frequency === 'weekly' ? 'weekly' : 'monthly';
+            this.showToast(`Reminder set! You'll receive ${frequencyText} email notifications`, 'success');
+            
+            this.showEmailPreview(task);
             this.saveTasks();
             this.renderTasks();
             this.updateStats();
         }
+        
+        document.getElementById('reminderModal').classList.add('hidden');
+        this.currentReminderTaskId = null;
     }
 deleteTask(id) {
         if (confirm('Are you sure you want to delete this task?')) {
@@ -186,9 +246,10 @@ deleteTask(id) {
                 completed="${task.completed}"
                 has-reminder="${task.hasReminder}"
                 reminder-stopped="${task.reminderStopped}"
+                reminder-frequency="${task.reminderFrequency || ''}"
                 created-at="${task.createdAt}"
             ></task-card>
-        `).join('');
+`).join('');
 
         // Re-initialize feather icons for new elements
         feather.replace();
@@ -213,17 +274,45 @@ deleteTask(id) {
         document.getElementById('emailModal').classList.remove('hidden');
     }
     startReminderScheduler() {
-        // Simulate sending reminders every 30 seconds for demo
+        // Check for reminders every minute
         setInterval(() => {
             this.tasks.forEach(task => {
                 if (task.hasReminder && !task.reminderStopped && !task.completed) {
-                    // In a real app, this would send an email
-                    console.log(`Sending reminder for task: ${task.text} to ${task.email}`);
-                    // Show a notification in the browser for demo purposes
-                    this.showToast(`Reminder: ${task.text}`, 'info');
+                    const now = new Date();
+                    const lastReminder = task.lastReminder ? new Date(task.lastReminder) : null;
+                    
+                    let shouldSend = false;
+                    
+                    if (!lastReminder) {
+                        // First reminder
+                        shouldSend = true;
+                    } else {
+                        const timeDiff = now - lastReminder;
+                        const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
+                        
+                        switch (task.reminderFrequency) {
+                            case 'daily':
+                                shouldSend = daysDiff >= 1;
+                                break;
+                            case 'weekly':
+                                shouldSend = daysDiff >= 7;
+                                break;
+                            case 'monthly':
+                                shouldSend = daysDiff >= 30;
+                                break;
+                        }
+                    }
+                    
+                    if (shouldSend) {
+                        // In a real app, this would send an email
+                        console.log(`Sending ${task.reminderFrequency} reminder for task: ${task.text} to ${task.email}`);
+                        this.showToast(`Reminder: ${task.text}`, 'info');
+                        task.lastReminder = now.toISOString();
+                        this.saveTasks();
+                    }
                 }
             });
-        }, 30000); // 30 seconds
+        }, 60000); // Check every minute
     }
 showToast(message, type = 'info') {
         const toast = document.createElement('div');