Skip to main content

​
Getting Started

Taskflow is a static HTML application that runs directly in your browser. No installation, no dependencies, no account creation - just open and start organizing your tasks.
1

Open the Application

Simply open the index.html file in any modern web browser:
# Using a web browser directly
open index.html

# Or serve it locally with a simple HTTP server
python -m http.server 8000
# Then visit http://localhost:8000
For the best experience, use a modern browser like Chrome, Firefox, Safari, or Edge. The application uses localStorage, which is supported in all modern browsers.
2

Create Your First Task

When you first open Taskflow, you’ll see some example tasks. Let’s create your own:
  1. Click on the Nueva tarea input field at the top
  2. Type your task name (e.g., “Complete project documentation”)
  3. Add a category in the Categoría field (e.g., “Work”)
  4. Select a priority from the dropdown: Alta, Media, or Baja
  5. Click the Añadir button or press Enter
Your task will appear in the corresponding priority section!
If you don’t specify a category, Taskflow automatically assigns “General” as the default category.
3

Understand the Priority System

Taskflow organizes tasks into three priority levels:
  • 🔴 Prioridad Alta (High) - Urgent tasks that need immediate attention
  • 🟠 Prioridad Media (Medium) - Important tasks to complete soon
  • 🟢 Prioridad Baja (Low) - Tasks you can do when you have time
Each task displays a colored badge matching its priority:
// Priority values in the code
selectPrioridad.value // 'alta', 'media', or 'baja'
Tasks are automatically grouped by priority in separate sections, each with a counter showing how many tasks are in that priority level.
4

Complete and Delete Tasks

Managing your tasks is intuitive:To mark a task as complete:
  • Click on the task name
  • The task will get a strikethrough style indicating completion
  • Click again to unmark it
To delete a task:
  • Click the ✕ button on the right side of the task
  • The task is removed immediately and permanently
// Tasks are saved automatically after every action
function guardarEnStorage() {
    localStorage.setItem('tareas', JSON.stringify(tareas));
}
All changes are saved automatically to your browser’s localStorage. You can close the page and come back anytime - your tasks will still be there!
5

Use Filters and Search

Taskflow provides two ways to find tasks quickly:Sidebar Filters:
  • Click Todas to see all tasks
  • Click 🔴 Prioridad Alta to see only high-priority tasks
  • Click 🟠 Prioridad Media to see only medium-priority tasks
  • Click 🟢 Prioridad Baja to see only low-priority tasks
Search Bar:
  • Type in the Buscar tarea field
  • Tasks are filtered in real-time as you type
  • The search matches against task names
// Real-time search implementation
inputBusqueda.addEventListener('input', function() {
    const busqueda = inputBusqueda.value.toLowerCase().trim();
    document.querySelectorAll('.tarea').forEach(function(tarea) {
        const nombre = tarea.querySelector('.nombre').textContent.toLowerCase();
        tarea.style.display = nombre.includes(busqueda) ? 'flex' : 'none';
    });
});
6

Enable Dark Mode

Toggle between light and dark themes:
  1. Click the 🌙 button in the top-right corner of the header
  2. The interface switches to dark mode with a custom color scheme
  3. Click again (now shows ☀️) to return to light mode
Your theme preference is saved automatically and persists across sessions:
// Theme is saved to localStorage
function aplicarTema(oscuro) {
    document.documentElement.classList.toggle('dark', oscuro);
    btnTema.textContent = oscuro ? '🌙' : '☀️';
    localStorage.setItem('tema', oscuro ? 'dark' : 'light');
}
Dark mode uses a carefully crafted color palette defined in the Tailwind config, with accent color #7a9cff for an easy-on-the-eyes experience.

​
Understanding Data Persistence

Taskflow stores all your data in the browser’s localStorage: 
// Task array structure
tareas = [
    { 
        id: 1, 
        texto: 'Hacer ejercicio',  
        categoria: 'Personal',    
        prioridad: 'alta',  
        completada: false 
    }
];
What this means:
  • Your tasks are private and stay on your device
  • No internet connection required after initial load
  • Data persists across browser sessions
  • Clearing browser data will delete your tasks
  • Tasks are not synced across devices
If you clear your browser’s cache or local storage, your tasks will be deleted. Consider exporting important tasks or taking screenshots for backup.

​
Default Tasks

When you first open Taskflow (or if localStorage is empty), you’ll see these example tasks:
  • Hacer ejercicio (Personal, Alta)
  • Estudiar (Estudios, Alta)
  • Revisar gastos (Personal, Media)
  • Jugar videojuegos (Videojuegos, Baja)
Feel free to delete these and add your own tasks!

​
Keyboard Shortcuts

Speed up your workflow with keyboard shortcuts:
  • Enter - When focused on the task input field, pressing Enter adds the task (same as clicking Añadir)
// Enter key support
inputTarea.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') btnAnadir.click();
});

​
Next Steps

Now that you know the basics:

Explore Features

Learn about advanced features and customization options

Technical Reference

Want to understand how Taskflow works? Check out the technical reference

Build docs developers (and LLMs) love

Get started for freeTalk to us