script.js

const loginPage = document.getElementById('login-page');
const todoPage = document.getElementById('todo-page');
const themeToggle = document.getElementById('theme-toggle');
const loginForm = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const greeting = document.getElementById('user-greeting');

const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const reminderInput = document.getElementById('reminder-time');
const list = document.getElementById('todo-list');
const reminderSound = document.getElementById('reminder-sound');

// Login
loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const username = usernameInput.value.trim();
  if (username) {
    greeting.textContent = `${username}'s To-Do List`;
    loginPage.classList.add('hidden');
    todoPage.classList.remove('hidden');
    themeToggle.classList.remove('hidden');
  }
});

// Add Task
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const taskText = input.value.trim();
  const reminderMinutes = parseInt(reminderInput.value);
  if (taskText) {
    addTask(taskText, reminderMinutes);
    input.value = '';
    reminderInput.value = '';
  }
});

function addTask(text, reminderMinutes) {
  const li = document.createElement('li');
  li.className = 'todo-item';

  const span = document.createElement('span');
  span.textContent = text;

  const actions = document.createElement('div');
  actions.className = 'todo-actions';

  const completeBtn = document.createElement('button');
  completeBtn.textContent = '✓';
  completeBtn.title = 'Mark as complete';
  completeBtn.addEventListener('click', () => {
    li.classList.toggle('completed');
  });}

  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = '🗑';
  deleteBtn.title = 'Delete task';
  deleteBtn.addEventListener('click', () => {
    li.remove();
  });

  // Get the theme switcher input element
const themeSwitch = document.getElementById('theme-switch');

// Check if the user has a previously saved theme preference
const savedTheme = localStorage.getItem('theme');

// If a saved theme exists, apply it to the body
if (savedTheme) {
    document.body.classList.toggle('dark', savedTheme === 'dark');
    themeSwitch.checked = savedTheme === 'dark';
} else {
    // Default theme (light mode)
    document.body.classList.remove('dark');
    themeSwitch.checked = false;
}

// Function to handle theme change
themeSwitch.addEventListener('change', function() {
    // Toggle dark mode on the body element
    if (themeSwitch.checked) {
        document.body.classList.add('dark');
        localStorage.setItem('theme', 'dark');
    } else {
        document.body.classList.remove('dark');
        localStorage.setItem('theme', 'light');
    }
});

// Ensure dark mode toggle is always positioned correctly
function adjustDarkModePosition() {
    const themeToggle = document.querySelector('.theme-toggle');
    if (window.innerWidth <= 768) {
        themeToggle.style.top = '20px';  // Keep it near the top for mobile
    } else {
        themeToggle.style.top = '10px';  // Adjust the position for larger screens
    }
}

// Adjust position on page load and window resize
window.addEventListener('load', adjustDarkModePosition);
window.addEventListener('resize', adjustDarkModePosition);