Overview
Taskflow’s core task management system allows users to create, complete, and delete tasks with a simple and intuitive interface. Each task contains essential information including a unique ID, text description, category, priority level, and completion status.
Task Object Structure
Every task in Taskflow is represented as a JavaScript object with the following properties:
const t = {
id: Date.now(),
texto: 'Hacer ejercicio',
categoria: 'Personal',
prioridad: 'alta',
completada: false
};
The id is generated using Date.now() to ensure each task has a unique timestamp-based identifier.
Creating Tasks
Tasks are created through the form interface and added to the tasks array. Here’s how the add button event listener works:
btnAnadir.addEventListener('click', function() {
const texto = inputTarea.value.trim();
const categoria = inputCategoria.value.trim() || 'General';
if (texto === '') return;
const t = { id: Date.now(), texto, categoria, prioridad: selectPrioridad.value, completada: false };
tareas.push(t);
guardarEnStorage();
const tarea = crearTareaElemento(t);
document.getElementById('seccion-' + t.prioridad).appendChild(tarea);
actualizarContadores();
inputTarea.value = '';
inputCategoria.value = '';
});
If no category is provided, the task defaults to “General”. Empty task text is not allowed.
Keyboard Shortcut
Users can press Enter in the task input field to quickly add tasks:
inputTarea.addEventListener('keydown', function(e) {
if (e.key === 'Enter') btnAnadir.click();
});
Rendering Tasks
The crearTareaElemento() function generates the HTML structure for each task:
function crearTareaElemento(t) {
const tarea = document.createElement('div');
tarea.classList.add('tarea');
tarea.dataset.categoria = t.categoria;
tarea.dataset.prioridad = t.prioridad;
if (t.completada) tarea.classList.add('completada');
tarea.innerHTML = `
<div class="nombre">${t.texto}</div>
<div class="categoria">Categoría: ${t.categoria}</div>
<span class="badge ${t.prioridad}">${t.prioridad}</span>
<button class="btnEliminar">✕</button>`;
// Event listeners for complete and delete
tarea.querySelector('.nombre').addEventListener('click', function() {
tarea.classList.toggle('completada');
const index = tareas.findIndex(x => x.id === t.id);
tareas[index].completada = !tareas[index].completada;
guardarEnStorage();
});
tarea.querySelector('.btnEliminar').addEventListener('click', function() {
tareas = tareas.filter(x => x.id !== t.id);
guardarEnStorage();
tarea.remove();
actualizarContadores();
});
return tarea;
}
Completing Tasks
Users can mark tasks as complete by clicking on the task name. This toggles the completada class and updates the task’s completion status:
tarea.querySelector('.nombre').addEventListener('click', function() {
tarea.classList.toggle('completada');
const index = tareas.findIndex(x => x.id === t.id);
tareas[index].completada = !tareas[index].completada;
guardarEnStorage();
});
Completed tasks are displayed with reduced opacity and a line-through style to visually distinguish them from active tasks.
Deleting Tasks
The delete button removes tasks from both the DOM and the tasks array:
tarea.querySelector('.btnEliminar').addEventListener('click', function() {
tareas = tareas.filter(x => x.id !== t.id);
guardarEnStorage();
tarea.remove();
actualizarContadores();
});
- Filters the task out of the
tareas array using its unique ID
- Saves the updated array to localStorage
- Removes the task element from the DOM
- Updates the priority section counters
