In the fast-paced world we live in, staying organized is a challenge we all face. That’s where a stylish and responsive To-Do List App can come to the rescue. Whether you’re building this for personal use or as part of a larger project, this beginner-friendly article will take you through the process of creating a visually appealing To-Do List App using HTML, CSS, and JavaScript.
Setting Up the HTML Structure
Let’s kick things off by creating the basic HTML structure for our To-Do List App. We’ll have a container for the app, a section for adding tasks, a list to display tasks, and buttons for actions.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>To-Do List App</title>
</head>
<body>
<div class="app">
<div class="add-task">
<input type="text" id="task" placeholder="Add a task...">
<button id="add">Add</button>
</div>
<ul id="task-list"></ul>
<div class="actions">
<button id="clear">Clear Completed</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
This HTML structure includes input fields for adding tasks, a list to display tasks, and buttons for actions like adding and clearing tasks.
Styling with CSS
To make our To-Do List App visually appealing, let’s add some CSS styles. Create a style.css file and apply the following styles:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.app {
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
width: 300px;
}
.add-task {
padding: 10px;
display: flex;
border-bottom: 1px solid #ccc;
}
input {
border: none;
background: none;
width: 100%;
font-size: 14px;
padding: 10px;
}
button {
border: none;
background: none;
font-size: 14px;
cursor: pointer;
}
#task-list {
list-style: none;
padding: 0;
}
li {
border-bottom: 1px solid #ccc;
padding: 10px;
display: flex;
justify-content: space-between;
}
.actions {
padding: 10px;
text-align: center;
}
These CSS styles give our To-Do List App a modern and clean appearance, ensuring it’s visually appealing.
Adding JavaScript Functionality
Now, let’s add JavaScript functionality to our To-Do List App. Create a script.js file and include the following code:
// Select elements from the DOM
const taskInput = document.getElementById("task");
const addTaskButton = document.getElementById("add");
const taskList = document.getElementById("task-list");
const clearButton = document.getElementById("clear");
// Function to add a new task
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") return;
const taskItem = document.createElement("li");
taskItem.innerHTML = `
${taskText}
<button class="delete">Delete</button>
`;
taskList.appendChild(taskItem);
taskInput.value = "";
// Add an event listener for deleting tasks
const deleteButton = taskItem.querySelector(".delete");
deleteButton.addEventListener("click", () => {
taskList.removeChild(taskItem);
});
}
// Function to clear completed tasks
function clearCompletedTasks() {
const completedTasks = taskList.querySelectorAll("li");
completedTasks.forEach(task => {
if (task.querySelector("button.delete")) {
taskList.removeChild(task);
}
});
}
// Add event listeners
addTaskButton.addEventListener("click", addTask);
taskInput.addEventListener("keyup", (event) => {
if (event.key === "Enter") {
addTask();
}
});
clearButton.addEventListener("click", clearCompletedTasks);
This JavaScript code adds functionality to our To-Do List App. Users can input tasks, mark them as complete, and clear completed tasks.
Making it Responsive
To ensure our To-Do List App is responsive, we can use media queries in our styles.css file to adjust the layout for different screen sizes. Here’s an example of how you can do this:
/* Small screens (mobile) */
@media (max-width: 600px) {
.app {
width: 80%;
}
}
/* Medium screens (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
.app {
width: 60%;
}
}
/* Large screens (desktop) */
@media (min-width: 1025px) {
.app {
width: 400px;
}
}
These media queries adapt the layout of the app for small screens (mobile), medium screens (tablets), and large screens (desktop).
Click here to get the complete source code.
Here is an article on how to host this app online using GitHub.
