practical-tutorials
Project todo
Project Base Learning ToDo Project.
Step 1: Set Up the HTML Structure `
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
