To-Do List

Step 2: Style the App with CSS `body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; }

.container { max-width: 400px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

h1 { text-align: center; margin-bottom: 20px; }

input[type="text"] { width: 80%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; margin-right: 10px; }

button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; }

ul { list-style-type: none; padding: 0; }

li { display: flex; justify-content: space-between; align-items: center; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 3px; margin-top: 5px; padding: 5px 10px; } ` Step 3: Implement JavaScript Functionality

// Get DOM elements const taskInput = document.getElementById('taskInput'); const addTaskBtn = document.getElementById('addTaskBtn'); const taskList = document.getElementById('taskList');

// Add task function function addTask() { const taskText = taskInput.value.trim();

if (taskText === '') {
    alert('Please enter a task!');
    return;
}

// Create a new task item
const taskItem = document.createElement('li');
taskItem.innerHTML = `
    ${taskText}
    <button class="delete-btn">Delete</button>
`;

// Add task to the list
taskList.appendChild(taskItem);

// Clear input field
taskInput.value = '';

// Attach event listener to the delete button
const deleteBtn = taskItem.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () => {
    taskItem.remove();
});

}

// Event listener for adding a task addTaskBtn.addEventListener('click', addTask);

// Event listener for adding a task using Enter key taskInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { addTask(); } });

Step 4: Testing the App

Open your index.html file in a web browser to test your to-do app. You should be able to add tasks, mark them as completed, and delete them.

Happy haking

practical-tutorials / project-based-learning

Project todo #453

To-Do List