Creating a Todo list web application is a staple project for anyone looking to improve their web development skills. This project allows you to explore various aspects of front-end development, including HTML structure, CSS styling, and JavaScript interactivity. In this guide, we’ll focus on building a Todo list with a sleek and modern user interface (UI) that enhances user experience.
Step 1: Designing the User Interface (UI)
Before diving into the code, it’s essential to conceptualize the design. The UI should be clean, intuitive, and responsive. Key components include:
- Input Field: For users to add new tasks.
- Add Button: To submit new tasks.
- Task List: Where all the tasks will be displayed.
- Task Management: Options to mark tasks as completed or delete them.
Step 2: Building the HTML Structure
Here’s the basic structure of our Todo list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>My Todo List</h1>
<div class="input-group">
<input type="text" id="task-input" placeholder="What do you need to do today?">
<button id="add-task">Add Task</button>
</div>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
<div class="todo-container">: Wraps all the elements and centers them on the page.<h1>: Displays the title.<div class="input-group">: Contains the input field and button for adding tasks.<ul id="task-list">: Where tasks will be displayed.
Step 3: Styling with CSS
Now that we have the structure, let’s make it visually appealing.
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.todo-container {
background-color: white;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
text-align: center;
color: #333;
}
.input-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
input[type="text"] {
width: 75%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #f8f8f8;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: #888;
}
li button {
background-color: #dc3545;
padding: 5px 10px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
li button:hover {
background-color: #c82333;
}
Explanation:
- Layout: The application is centered with a clean, modern look using a white container with rounded corners and a shadow.
- Input and Button: Styled to ensure usability with responsive dimensions and hover effects.
- Task Items: Styled with padding, rounded corners, and hover effects for delete buttons. Completed tasks are visually distinguished with a strikethrough.
Step 4: Adding Functionality with JavaScript
Finally, let’s add interactivity to the application.
// script.js
document.getElementById('add-task').addEventListener('click', function() {
const taskInput = document.getElementById('task-input').value;
if (taskInput.trim() === '') {
alert('Please enter a task');
return;
}
const taskList = document.getElementById('task-list');
const taskItem = document.createElement('li');
taskItem.textContent = taskInput;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
taskItem.appendChild(deleteButton);
deleteButton.addEventListener('click', function() {
taskItem.remove();
});
taskItem.addEventListener('click', function() {
taskItem.classList.toggle('completed');
});
taskList.appendChild(taskItem);
document.getElementById('task-input').value = '';
});
Explanation:
- Adding Tasks: When the “Add Task” button is clicked, a new list item (
li) is created with the input text. - Deleting Tasks: Each task has a “Delete” button that removes it from the list.
- Marking as Complete: Clicking on a task toggles its completion status, applying the
completedclass. document.getElementById('add-task').addEventListener('click', function() {...}): Adds an event listener to the “Add Task” button. When clicked, the function executes to handle task addition.const taskInput = document.getElementById('task-input').value;: Retrieves the value from the input field.if (taskInput.trim() === '') { alert('Please enter a task'); return; }: Checks if the input is empty. If so, an alert is shown, and the function exits.const taskList = document.getElementById('task-list');: Gets the task list element where tasks will be added.const taskItem = document.createElement('li');: Creates a new list item for the task.taskItem.textContent = taskInput;: Sets the text content of the list item to the input value.const deleteButton = document.createElement('button');: Creates a delete button for each task.deleteButton.textContent = 'Delete';: Sets the text for the delete button.taskItem.appendChild(deleteButton);: Appends the delete button to the task item.deleteButton.addEventListener('click', function() { taskItem.remove(); });: Adds an event listener to the delete button to remove the task item when clicked.taskItem.addEventListener('click', function() { taskItem.classList.toggle('completed'); });: Adds an event listener to the task item to toggle its completion status when clicked.taskList.appendChild(taskItem);: Adds the newly created task item to the task list.document.getElementById('task-input').value = '';: Clears the input field after adding the task.
Conclusion
By following this guide, you’ve created a Todo list web application with a focus on delivering a top-notch UI. The combination of a clean design and seamless interactivity makes the app both functional and visually appealing. Whether you’re using this as a learning project or a foundational piece for something more complex, it’s an excellent example of how thoughtful design and clean code can come together to create a delightful user experience.