¿Cómo agregar funcionalidad a los botones de una aplicación de tareas?

El aumento de la funcionalidad en una aplicación es crucial para garantizar una experiencia de usuario fluida y útil. En el contexto de una aplicación para gestionar tareas, la capacidad de editar o eliminar una tarea con un simple clic es de suma importancia. Veamos cómo implementar estas funciones esenciales en una aplicación de lista de tareas utilizando JavaScript.

Análisis del código de creación de tareas

Antes de explicar cómo agregar funcionalidad a los botones, es importante entender cómo se crean las tareas en nuestra aplicación:

1. Configuración inicial y captura de elementos

const taskForm = document.getElementById('task-form')
const taskList = document.getElementById('task-list')

Aquí capturamos las referencias a dos elementos HTML fundamentales:

• taskForm: El formulario donde el usuario ingresa nuevas tareas
• taskList: El contenedor donde se mostrarán todas las tareas

2. Manejo del formulario para crear nuevas tareas

taskForm.addEventListener('submit', (event) => {
  event.preventDefault()
  const taskInput = document.getElementById('task-input')
  const task = taskInput.value
  console.log(task)
  if(task) {
    taskList.append(createTaskElement(task))
    taskInput.value = ''
  }
})

Este bloque de código maneja el envío del formulario:

• event.preventDefault(): Evita que el formulario se envíe de forma tradicional y recargue la página
• taskInput.value: Obtiene el texto que el usuario escribió en el campo de entrada
• if(task): Verifica que el campo no esté vacío antes de crear la tarea
• taskList.append(createTaskElement(task)): Agrega la nueva tarea al contenedor de tareas
• taskInput.value = '': Limpia el campo de entrada después de crear la tarea

3. Función para crear elementos de tarea

function createTaskElement(task) {
  const li = document.createElement('li')
  li.textContent = task
  li.append(createButton('❌','delete-btn'), createButton('✏️','edit-btn'))
  return li
}

Esta función crea cada elemento de tarea:

• document.createElement('li'): Crea un elemento de lista (
• )
• li.textContent = task: Establece el texto de la tarea
• li.append(...): Agrega los botones de eliminar y editar al elemento de tarea
• return li: Devuelve el elemento completo listo para ser agregado al DOM

4. Función auxiliar para crear botones

function createButton(text, className) {
  const btn = document.createElement('span')
  btn.textContent = text
  btn.className = className
  return btn
}

Esta función crea los botones de acción:

• document.createElement('span'): Crea un elemento span para el botón
• btn.textContent = text: Establece el emoji o texto del botón (❌ para eliminar, ✏️ para editar)
• btn.className = className: Asigna una clase CSS para identificar el tipo de botón
• return btn: Devuelve el botón listo para usar

¿Cómo implementar la delegación de eventos?

La delegación de eventos es una técnica eficaz que se utiliza para gestionar eventos en aplicaciones. Facilita el manejo de eventos en elementos secundarios mediante la vinculación del evento a un elemento padre.

document.querySelector('#task-list').addEventListener('click', event => {
  if(event.target.classList.contains('delete-btn')) {
    deleteTask(event.target.parentElement);
  } else if(event.target.classList.contains('edit-btn')) {
    editTask(event.target.parentElement);
  }
});

Al asociar el evento click al elemento padre task-list, identificamos el elemento específico que fue clicado mediante event.target. Posteriormente, comprobamos las clases de ese target para determinar la acción correspondiente: eliminar o editar.

Nota importante: Las clases deben coincidir con las que definimos en la función createButton(): delete-btn y edit-btn.

¿Cómo borrar una tarea de manera eficiente?

La acción de borrar una tarea es esencial para mantener la lista actualizada y despejada de tareas completadas o irrelevantes.

function deleteTask(taskItem) {
  if(confirm("¿Estás segura, seguro, de borrar este elemento?")) {
    taskItem.remove();
  }
}

Mediante un confirm, solicitamos al usuario que verifique la acción antes de eliminar la tarea. Si el usuario confirma, utilizamos remove() para borrar el elemento del DOM.

¿Cuál es el proceso para editar una tarea?

Editar contenido de una tarea mejora la flexibilidad y precisión de nuestro listado.

function editTask(taskItem) {
  const newTask = prompt("Edita la tarea:", taskItem.firstChild.textContent);
  if(newTask !== null && newTask.trim() !== '') {
    taskItem.firstChild.textContent = newTask;
  }
}

Aquí se muestra un prompt con el contenido actual de la tarea, permitiendo su modificación. Comprobamos que la respuesta no sea null y que no esté vacía antes de aplicar el cambio.

Estructura HTML recomendada

Para que este código funcione correctamente, tu HTML debe tener una estructura similar a esta:

<form id="task-form">
  <input type="text" id="task-input" placeholder="Escribe una nueva tarea...">
  <button type="submit">Agregar Tareabutton>
form>

<ul id="task-list">
  
ul>

Código completo integrado

// Configuración inicial
const taskForm = document.getElementById('task-form')
const taskList = document.getElementById('task-list')

// Crear nuevas tareas
taskForm.addEventListener('submit', (event) => {
  event.preventDefault()
  const taskInput = document.getElementById('task-input')
  const task = taskInput.value
  
  if(task) {
    taskList.append(createTaskElement(task))
    taskInput.value = ''
  }
})

// Funciones de creación
function createTaskElement(task) {
  const li = document.createElement('li')
  li.textContent = task
  li.append(createButton('❌','delete-btn'), createButton('✏️','edit-btn'))
  return li
}

function createButton(text, className) {
  const btn = document.createElement('span')
  btn.textContent = text
  btn.className = className
  return btn
}

// Delegación de eventos para botones
taskList.addEventListener('click', event => {
  if(event.target.classList.contains('delete-btn')) {
    deleteTask(event.target.parentElement);
  } else if(event.target.classList.contains('edit-btn')) {
    editTask(event.target.parentElement);
  }
});

// Funciones de acción
function deleteTask(taskItem) {
  if(confirm("¿Estás segura, seguro, de borrar este elemento?")) {
    taskItem.remove();
  }
}

function editTask(taskItem) {
  const newTask = prompt("Edita la tarea:", taskItem.firstChild.textContent);
  if(newTask !== null && newTask.trim() !== '') {
    taskItem.firstChild.textContent = newTask;
  }
}

Resumen

Estos pasos no solo amplían la funcionalidad de nuestra aplicación, sino que también mejoran la interactividad del usuario, volviendo la gestión de tareas más eficiente y amigable.

Puntos clave aprendidos:

1. Cómo crear elementos HTML dinámicamente con JavaScript
2. Cómo manejar formularios y prevenir el comportamiento por defecto
3. Cómo usar la delegación de eventos para manejar botones dinámicos
4. Cómo implementar funciones de eliminación y edición de tareas
5. La importancia de la validación de entrada del usuario

Experimenta implementando estas características para ver cómo se transforma la experiencia del usuario en tu aplicación. Y recuerda, la práctica constante y la exploración son clave para desarrollar habilidades avanzadas en programación.