Build a Simple To-Do List App

开发 to-do list, JavaScript tutorial, web development, HTML CSS JavaScript, beginner project 03-14

Building a Simple To-Do List Application with JavaScript

In this tutorial, we will build a simple to-do list application using HTML, CSS, and JavaScript. This application will allow users to add, remove, and mark tasks as completed. It's a great project for beginners to practice their web development skills.

Step 1: Setting Up the HTML Structure

First, we'll create the basic HTML structure for our to-do list application. This will include an input field for adding new tasks, a button to submit the task, and a list to display the tasks.

<!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>To-Do List</h1>
        <input type="text" id="task-input" placeholder="Add a new task">
        <button id="add-task-btn">Add Task</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Styling the Application with CSS

Next, let's add some basic styles to make our application look better. We'll use CSS to style the input field, button, and task list.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

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

h1 {
    text-align: center;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

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

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li.completed {
    text-decoration: line-through;
    color: #888;
}

Step 3: Adding Functionality with JavaScript

Now, let's add the JavaScript code to handle adding, removing, and marking tasks as completed.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('task-input');
    const addTaskBtn = document.getElementById('add-task-btn');
    const taskList = document.getElementById('task-list');

    addTaskBtn.addEventListener('click', () => {
        const taskText = taskInput.value.trim();
        if (taskText !== '') {
            const taskItem = document.createElement('li');
            taskItem.textContent = taskText;

            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.addEventListener('click', () => {
                taskList.removeChild(taskItem);
            });

            taskItem.appendChild(deleteBtn);
            taskItem.addEventListener('click', () => {
                taskItem.classList.toggle('completed');
            });

            taskList.appendChild(taskItem);
            taskInput.value = '';
        }
    });
});

Conclusion

With these steps, you have created a simple to-do list application. You can now add tasks, mark them as completed, and remove them from the list. This project can be further enhanced by adding features like task editing, saving tasks to local storage, or even integrating with a backend service.

编辑：一起学习网