const addBtn = document.getElementById('add-btn');

const taskInput = document.getElementById('task-input');

const taskList = document.getElementById('task-list');

// Load saved tasks from localStorage

document.addEventListener("DOMContentLoaded", loadTasks);

addBtn.addEventListener('click', addTask);

function addTask() {

const taskText = taskInput.value.trim();

if (taskText === "") return;

const li = createTaskElement(taskText);

taskList.appendChild(li);

saveTask(taskText);

taskInput.value = "";

}

function createTaskElement(taskText) {

const li = document.createElement('li');

li.textContent = taskText;

// Toggle complete

li.addEventListener('click', () => {

li.classList.toggle('completed');

});

// Delete button

const deleteBtn = document.createElement('button');

deleteBtn.textContent = "❌";

deleteBtn.style.marginLeft = "10px";

deleteBtn.addEventListener('click', () => {

li.remove();

removeTask(taskText);

});

li.appendChild(deleteBtn);

return li;

}

// Save to localStorage

function saveTask(taskText) {

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

tasks.push(taskText);

localStorage.setItem('tasks', JSON.stringify(tasks));

}

// Remove from localStorage

function removeTask(taskText) {

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

tasks = tasks.filter(t => t !== taskText);

localStorage.setItem('tasks', JSON.stringify(tasks));

}

// Load tasks from localStorage

function loadTasks() {

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

tasks.forEach(taskText => {

const li = createTaskElement(taskText);

taskList.appendChild(li);

});

}