script.js

// DOM Manipulation
const todoCreateButton = document.querySelector(".todo__create__button");
const todoContainer = document.querySelector(".todo__container");
const todoInput = document.querySelector("#todo__input");

// Function to update time and greeting
function updateTimeAndGreeting() {
  const now = new Date();
  
  // Update time
  const timeElement = document.querySelector('.container__header__time h1');
  const time = now.toLocaleTimeString('en-US', { 
    hour: '2-digit', 
    minute: '2-digit',
    hour12: true 
  });
  timeElement.textContent = time;
  
  // Update date
  const dateElement = document.querySelector('.container__header p');
  const options = { 
    weekday: 'short', 
    day: 'numeric', 
    month: 'long', 
    year: 'numeric' 
  };
  const dateString = now.toLocaleDateString('en-US', options);
  dateElement.textContent = `Today, ${dateString}`;
  
  // Update greeting based on time
  const greetingElement = document.querySelector('.container__header h1');
  const hour = now.getHours();
  let greeting;
  
  if (hour < 12) {
    greeting = "Good Morning";
  } else if (hour < 17) {
    greeting = "Good Afternoon";
  } else {
    greeting = "Good Evening";
  }
  
  greetingElement.textContent = `${greeting}, Chanithi 😊`;
}

// Call initially and then every minute
updateTimeAndGreeting();
setInterval(updateTimeAndGreeting, 60000);

// Todo functionality
let todoItems = [];
let nextId = 0;

todoCreateButton.addEventListener("click", () => {
  const todoText = todoInput.value.trim();
  if (todoText === "") {
    alert("Please enter a valid todo");
    return;
  }

  // Create todo object with unique ID and completed status
  const todoItem = {
    id: nextId++,
    text: todoText,
    completed: false
  };
  
  todoItems.push(todoItem);
  todoInput.value = "";
  renderTodos();
});

// Allow adding todos with Enter key
todoInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    todoCreateButton.click();
  }
});

// Function to render all todos
function renderTodos() {
  const todoElements = todoItems.map((todoItem) => {
    const completedClass = todoItem.completed ? 'todo__item--completed' : '';
    const checkedAttribute = todoItem.completed ? 'checked' : '';
    
    return `<div class="todo__item ${completedClass}" data-id="${todoItem.id}">
          <div class="todo__item__left">
            <input type="checkbox" ${checkedAttribute} class="todo__checkbox" data-id="${todoItem.id}" />
            <span>${todoItem.text}</span>
          </div>
          <div class="todo__item__right">
            <svg
              class="todo__delete__button"
              data-id="${todoItem.id}"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="red"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M3 6h18" />
              <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
              <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
            </svg>
          </div>
        </div>`;
  });

  todoContainer.innerHTML = todoElements.join("");
  
  // Add event listeners for checkboxes and delete buttons
  addEventListeners();
}

// Function to add event listeners to dynamically created elements
function addEventListeners() {
  // Checkbox event listeners
  const checkboxes = document.querySelectorAll('.todo__checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', (e) => {
      const todoId = parseInt(e.target.dataset.id);
      const todoItem = todoItems.find(item => item.id === todoId);
      if (todoItem) {
        todoItem.completed = e.target.checked;
        renderTodos();
      }
    });
  });
  
  // Delete button event listeners
  const deleteButtons = document.querySelectorAll('.todo__delete__button');
  deleteButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      const todoId = parseInt(e.target.closest('.todo__delete__button').dataset.id);
      todoItems = todoItems.filter(item => item.id !== todoId);
      renderTodos();
    });
  });
}