Crear una Lista de Tareas con HTML, CSS y JavaScript

por
Tiempo de lectura: 2 minutos

En este tutorial, aprenderás a construir una aplicación de lista de tareas que te ayudará a mantener un registro de tus tareas pendientes.

Herramientas necesarias: Un editor de texto, un navegador web y conocimientos básicos de HTML, CSS y JavaScript.

Paso 1: Configurar la estructura HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tareas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Lista de Tareas</h1>
    </header>
    <main>
        <div class="task-container">
            <input type="text" id="task" placeholder="Agregar nueva tarea...">
            <button id="add-button">Agregar</button>
        </div>
        <ul id="task-list">
            <!-- Aquí se mostrarán las tareas -->
        </ul>
    </main>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Estilizar con CSS

Crea un archivo «styles.css» para dar estilo a tu lista de tareas:

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 = 'Eliminar';

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

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

    taskList.appendChild(taskItem);
}

Paso 3: Agregar la lógica de JavaScript

Crea un archivo «script.js» para la lógica de la lista de tareas:

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 = 'Eliminar';

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

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

    taskList.appendChild(taskItem);
}

Paso 4: ¡Prueba tu Lista de Tareas!

Abre el archivo HTML en tu navegador y verifica que la lista de tareas funcione correctamente. Deberías poder agregar tareas nuevas y eliminarlas haciendo clic en el botón «Eliminar».

¡Ahora tienes una lista de tareas funcional que puede ayudarte a mantener tus tareas organizadas! Puedes personalizarla o agregar más funcionalidades según tus necesidades. Este tutorial es útil para cualquier persona que quiera una forma sencilla de administrar sus tareas diarias.

Post Views: 122

Deja un comentario