File size: 3,125 Bytes
1c18774 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | document.addEventListener('DOMContentLoaded', function() {
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');
// Load todos from localStorage
let todos = JSON.parse(localStorage.getItem('todos')) || [];
// Render initial todos
renderTodos();
// Add event listener for adding new todo
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTodo();
}
});
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText === '') {
alert('Please enter a task!');
return;
}
const newTodo = {
id: Date.now(),
text: todoText,
completed: false
};
todos.push(newTodo);
saveTodos();
renderTodos();
// Clear input field
todoInput.value = '';
todoInput.focus();
}
function deleteTodo(id) {
todos = todos.filter(todo => todo.id !== id);
saveTodos();
renderTodos();
}
function toggleComplete(id) {
todos = todos.map(todo => {
if (todo.id === id) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
saveTodos();
renderTodos();
}
function renderTodos() {
todoList.innerHTML = '';
if (todos.length === 0) {
const emptyMessage = document.createElement('li');
emptyMessage.className = 'empty-message';
emptyMessage.textContent = 'No tasks yet. Add one above!';
todoList.appendChild(emptyMessage);
return;
}
todos.forEach(todo => {
const todoItem = document.createElement('li');
todoItem.className = `todo-item ${todo.completed ? 'completed' : ''}`;
const todoText = document.createElement('span');
todoText.className = 'todo-text';
todoText.textContent = todo.text;
const completeBtn = document.createElement('button');
completeBtn.className = 'complete-btn';
completeBtn.textContent = todo.completed ? 'Undo' : 'Complete';
completeBtn.addEventListener('click', () => toggleComplete(todo.id));
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', () => deleteTodo(todo.id));
todoItem.appendChild(completeBtn);
todoItem.appendChild(todoText);
todoItem.appendChild(deleteBtn);
todoList.appendChild(todoItem);
});
}
function saveTodos() {
localStorage.setItem('todos', JSON.stringify(todos));
}
}); |