Creating a To-Do List with HTML, CSS, and JavaScript

by
Tiempo de lectura: 2 minutos

In this tutorial, you will learn how to build a to-do list application that will help you keep track of your pending tasks.

Tools needed: A text editor, a web browser, and basic knowledge of HTML, CSS, and JavaScript.

Step 1: Set up the HTML Structure

<!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>
    <header>
        <h1>To-Do List</h1>
    </header>
    <main>
        <div class="task-container">
            <input type="text" id="task" placeholder="Add a new task...">
            <button id="add-button">Add</button>
        </div>
        <ul id="task-list">
            <!-- Tasks will be displayed here -->
        </ul>
    </main>
    <script src="script.js"></script>
</body>
</html>

Step 2: Style with CSS

Create a “styles.css” file to style your to-do list:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

header {
    background-color: #007BFF;
    color: #fff;
    padding: 20px 0;
}

h1 {
    font-size: 24px;
}

.task-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 18px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Step 3: Add JavaScript Logic

Create a “script.js” file for the to-do list logic:

const addButton = document.getElementById('add-button');
const taskInput = document.getElementById('task');
const taskList = document.getElementById('task-list');

addButton.addEventListener('click', () => {
    const taskText = taskInput.value.trim();

    if (taskText !== '') {
        addTask(taskText);
        taskInput.value = '';
    }
});

taskInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        const taskText = taskInput.value.trim();

        if (taskText !== '') {
            addTask(taskText);
            taskInput.value = '';
        }
    }
});

function addTask(taskText) {
    const taskItem = document.createElement('li');
    taskItem.classList.add('task');

    const taskContent = document.createElement('span');
    taskContent.textContent = taskText;

    const deleteButton = document.createElement('button');
    deleteButton.classList.add('delete-button');
    deleteButton.textContent = 'Delete';

    deleteButton.addEventListener('click', () => {
        taskItem.remove();
    });

    taskItem.appendChild(taskContent);
    taskItem.appendChild(deleteButton);

    taskList.appendChild(taskItem);
}

Step 4: Test Your To-Do List!

Open the HTML file in your browser and verify that the to-do list works correctly. You should be able to add new tasks and delete them by clicking the “Delete” button.

Now you have a functional to-do list that can help you keep your tasks organized! You can customize it or add more features as needed. This tutorial is useful for anyone looking for a simple way to manage their daily tasks.

Post Views: 13

Leave a Comment