Contador de Tareas Pendientes creado con HTML y Javascript

por
Tiempo de lectura: 2 minutos

Este proyecto será útil para las personas que deseen llevar un seguimiento de sus tareas pendientes de manera efectiva.

Título: Tutorial de Creación de un Contador de Tareas Pendientes con HTML y JavaScript

Objetivo: En este tutorial, aprenderemos a construir un contador de tareas pendientes que ayudará a los usuarios a mantenerse organizados y productivos.

Nivel de Dificultad: Principiante

Herramientas necesarias: Un editor de texto y un navegador web.

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>Contador de Tareas Pendientes</title>
</head>
<body>
    <h1>Mi Lista de Tareas</h1>
    <input type="text" id="task" placeholder="Añade una tarea...">
    <button id="add-task">Agregar Tarea</button>
    <ul id="task-list">
        <!-- Aquí se mostrarán las tareas -->
    </ul>
    <p>Tareas Pendientes: <span id="task-count">0</span></p>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Agregar la lógica de JavaScript

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

document.addEventListener("DOMContentLoaded", () => {
    const taskInput = document.getElementById("task");
    const addTaskButton = document.getElementById("add-task");
    const taskList = document.getElementById("task-list");
    const taskCount = document.getElementById("task-count");

    // Inicializar el contador de tareas pendientes
    let tasksPending = 0;

    // Función para actualizar el contador
    function updateTaskCount() {
        taskCount.textContent = tasksPending;
    }

    // Función para agregar una tarea
    function addTask() {
        const taskText = taskInput.value.trim();

        if (taskText !== "") {
            const taskItem = document.createElement("li");
            taskItem.textContent = taskText;

            // Botón para eliminar la tarea
            const deleteButton = document.createElement("button");
            deleteButton.textContent = "Eliminar";
            deleteButton.addEventListener("click", () => {
                taskItem.remove();
                tasksPending--;
                updateTaskCount();
            });

            taskItem.appendChild(deleteButton);
            taskList.appendChild(taskItem);

            // Limpiar el campo de entrada
            taskInput.value = "";

            tasksPending++;
            updateTaskCount();
        }
    }

    // Escuchar el evento de clic en el botón Agregar Tarea
    addTaskButton.addEventListener("click", addTask);

    // Escuchar el evento de presionar Enter en el campo de entrada
    taskInput.addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
            addTask();
        }
    });
});

Paso 3: Estilo CSS (Opcional)

Puedes agregar estilos CSS personalizados para hacer que tu contador de tareas sea más atractivo. Crea un archivo «styles.css» y agrega estilos según tu preferencia.

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

h1 {
    color: #333;
}

input[type="text"] {
    padding: 10px;
    font-size: 16px;
}

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

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

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

li {
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button.delete-button {
    background-color: #ff3d3d;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

button.delete-button:hover {
    background-color: #e82c2c;
}

Paso 4: Prueba tu Contador de Tareas Pendientes

Abre el archivo HTML en tu navegador y verifica que el contador de tareas pendientes funcione correctamente. Deberías poder agregar tareas, eliminarlas y ver el número actual de tareas pendientes en tiempo real.

Post Views: 5

Deja un comentario