Todo List
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
#todo-form {
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.delete-btn {
background-color: #e74c3c;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}
.completed {
text-decoration: line-through;
}
// scripts.js
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText === '') {
alert('Please enter a task.');
return;
}
const todoItem = createTodoItem(todoText);
todoList.appendChild(todoItem);
todoInput.value = '';
}
function createTodoItem(todoText) {
const todoItem = document.createElement('li');
todoItem.textContent = todoText;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete-btn');
deleteBtn.onclick = function() {
todoItem.remove();
};
const completeCheckbox = document.createElement('input');
completeCheckbox.type = 'checkbox';
completeCheckbox.onchange = function() {
if (completeCheckbox.checked) {
todoItem.classList.add('completed');
} else {
todoItem.classList.remove('completed');
}
};
todoItem.appendChild(completeCheckbox);
todoItem.appendChild(deleteBtn);
return todoItem;
}
No comments:
Post a Comment