Create a To-Do List with JavaScript

开发 to-do list, JavaScript project, front-end development, DOM manipulation, beginner JavaScript 03-14

Creating a Simple To-Do List Application with JavaScript

In this tutorial, we will create 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 front-end development skills.

Step 1: Set Up the HTML Structure

First, we need to 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 them, 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: Style the Application with CSS

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

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f9;
    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;
    text-align: center;
}

input[type="text"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

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: Implement the JavaScript Functionality

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', addTask);

    function addTask() {
        const taskText = taskInput.value.trim();
        if (taskText === '') return;

        const li = document.createElement('li');
        li.textContent = taskText;

        const completeBtn = document.createElement('button');
        completeBtn.textContent = 'Complete';
        completeBtn.addEventListener('click', () => {
            li.classList.toggle('completed');
        });

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

        li.appendChild(completeBtn);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);

        taskInput.value = '';
    }
});

Explanation

HTML: We created a simple structure with an input field, a button, and an unordered list to display tasks.
CSS: We styled the application to make it visually appealing, with a centered container and styled buttons.
JavaScript: We added functionality to add tasks to the list, mark them as completed, and remove them. Event listeners are used to handle button clicks.

This simple to-do list application demonstrates the basics of DOM manipulation and event handling in JavaScript. You can expand on this by adding features like editing tasks, saving tasks to local storage, or adding a filter to show only completed or pending tasks.

编辑：一起学习网