The task idea you've proposed is excellent! A To-Do List app is a perfect project for practicing core web development skills with JavaScript. You've already outlined great improvements to the basic functionality, and they will definitely add value to the app. Let’s break it down into an actionable plan, and I'll guide you step-by-step through the features and improvements, including code examples where needed.
Initial Steps: Basic To-Do List App
1. HTML Structure
Start by creating the basic HTML layout for the app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>My To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button id="addTaskButton">Add</button>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
2. CSS Styling
Add simple CSS to make the app look clean and user-friendly.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.todo-container {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
input {
width: 70%;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
li.completed {
text-decoration: line-through;
color: #888;
}
input[type="date"] {
margin-left: 10px;
padding: 5px;
width: 90px;
}
3. JavaScript Functionality
Implement the core logic for adding, deleting, and marking tasks as complete, and saving the tasks in localStorage.
Basic Features (Add, Delete, Mark Completed, and Persist Tasks):
// Select DOM elements
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
// Load tasks from localStorage
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// Function to render tasks
function renderTasks() {
taskList.innerHTML = ''; // Clear the list
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.classList.toggle('completed', task.completed);
const taskText = document.createElement('span');
taskText.textContent = task.text;
taskText.addEventListener('click', () => toggleTaskCompletion(index));
// Edit task button
const editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', () => editTask(index));
// Delete task button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => deleteTask(index));
// Add the due date
const dueDateText = document.createElement('span');
if (task.dueDate) {
dueDateText.textContent = ` (Due: ${task.dueDate})`;
}
li.appendChild(taskText);
li.appendChild(dueDateText);
li.appendChild(editButton);
li.appendChild(deleteButton);
taskList.appendChild(li);
});
}
// Add a task
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') return;
const dueDate = document.getElementById('dueDateInput') ? document.getElementById('dueDateInput').value : '';
tasks.push({ text: taskText, completed: false, dueDate });
taskInput.value = ''; // Clear input field
saveTasks();
renderTasks();
}
// Toggle task completion
function toggleTaskCompletion(index) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
// Delete task
function deleteTask(index) {
tasks.splice(index, 1); // Remove task from array
saveTasks();
renderTasks();
}
// Edit task
function editTask(index) {
taskInput.value = tasks[index].text; // Set the input field with the task text
addTaskButton.textContent = 'Save'; // Change button text to "Save"
// When "Save" is clicked, update the task
addTaskButton.onclick = function() {
tasks[index].text = taskInput.value.trim(); // Update task text
taskInput.value = '';
addTaskButton.textContent = 'Add'; // Reset button text
saveTasks();
renderTasks();
};
}
// Save tasks to localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Event listener to add tasks
addTaskButton.addEventListener('click', addTask);
// Initial render
renderTasks();
4. Improvements
Edit Tasks
The editTask() function allows the user to click on the Edit button next to each task to modify it.
When editing, the task's text appears in the input field.
After clicking "Save", the task is updated in the tasks array, and the list is re-rendered.
Sort Tasks
Add sorting functionality to allow users to sort tasks by completion status or by due date.
Example: Sort by Completion Status
function sortTasksByCompletion() {
tasks.sort((a, b) => a.completed - b.completed); // Move completed tasks to the bottom
saveTasks();
renderTasks();
}
const sortButton = document.createElement('button');
sortButton.textContent = 'Sort by Completion';
document.body.insertBefore(sortButton, taskList);
sortButton.addEventListener('click', sortTasksByCompletion);
You can extend this to sort by due date or other criteria.
Responsive Design
To make the app responsive, you can use CSS media queries to adjust the layout for mobile and tablet screens.
Example Media Query
@media (max-width: 600px) {
.todo-container {
width: 100%;
margin: 20px;
}
input {
width: 70%;
}
button {
width: 25%;
}
li {
font-size: 14px;
}
}
Due Dates
You can allow users to set a due date for tasks and display it alongside the task.
Example Code
<!-- Add a date input field in the HTML -->
<input type="date" id="dueDateInput" />
In the addTask() function, we store the due date with each task:
const dueDate = document.getElementById('dueDateInput').value;
tasks.push({ text: taskText, completed: false, dueDate: dueDate || '' });
Display the due date when rendering tasks:
const dueDateText = document.createElement('span');
if (task.dueDate) {
dueDateText.textContent = ` (Due: ${task.dueDate})`;
}
Animations
Adding simple animations can make the app more dynamic. Use CSS transitions or animations for task addition/removal.
Example: Fade-in Animation for New Tasks:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
li {
animation: fadeIn 0.5s ease-in-out;
}
You can also animate the removal of tasks:
function deleteTask(index) {
const li = taskList.children[index];
li.style.animation = 'fadeOut 0.5s forwards'; // Apply fade-out animation
setTimeout(() => {
tasks.splice(index, 1); // Remove task
saveTasks();
renderTasks();
}, 500); // Wait for animation to complete
}
CSS for Fade-out
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}