Salta el contingut

504222199-c9cc5e37-908c-4b48-a9fe-40f46a8130d0.png

Exercici intermedi de JavaScript — Gestor de tasques amb prioritat i dates

Objectius:

  • Practicar bucles (for, for...of), condicionals (if/else), i switch/case.
  • Manipular vectors/arrays amb operacions comunes (afegir, eliminar, buscar, filtrar, map, reduce).
  • Gestionar esdeveniments i actualitzar el DOM dinàmicament.
  • Utilitzar objectes natius de JavaScript (Date, Math, localStorage).
  • Definir i utilitzar objectes generats per l'usuari (classe o constructor).
  • Escriure funcions natives i pròpies ben estructurades i reutilitzables.

Descripció general:

Crea una petita aplicació web (HTML + JavaScript) anomenada "Gestor de tasques" que permeti crear i gestionar una llista de tasques amb les propietats mínimes següents:

  • id (únic)
  • títol
  • descripció (opcional)
  • data de venciment (dueDate)
  • prioritat (low / medium / high)
  • estat (pendents / completades)
  • etiquetes (array de strings)

Requisits funcionals (mínims):

  1. Formuari per afegir una nova tasca: títol (required), descripció, data de venciment (input type=date), prioritat (select: low, medium, high), etiquetes (camp text amb etiquetes separades per comes).
  2. Afegir la tasca a un array local en memòria i mostrar-la al DOM com a llista (cada tasca en una tarjeta o fila).
  3. Permetre marcar una tasca com a completada i alternar-ne l'estat (pendents <-> completades).
  4. Permetre eliminar una tasca.
  5. Filtrar la vista per:
    • estat (Totes / Pendents / Completades)
    • prioritat (Totes / Low / Medium / High)
  6. Ordre per:
    • data de venciment (ascendent / descendent)
    • prioritat (high -> medium -> low) L'usuari pot triar l'ordre (select o botons).
  7. Estadístiques en temps real:
    • Total de tasques
    • Pendents
    • Completades
    • Percentatge completat (calcular amb reduce)
    • Nombre de tasques per prioritat (usar Map o object)
  8. Emmagatzematge (opcional però recomanat):
    • Guardar i recuperar llista de tasques a/de localStorage perquè perduri entre recarregades de pàgina.
  9. Utilitzar una classe (per exemple Task) i una classe/gestor (TaskManager) per encapsular la lògica d'afegir/eliminar/filtrar/ordenar.
  10. Implementar, en algun punt del codi, un switch/case per tractar accions de filtrat o d'ordena (p. ex. una funció handleAction(action, payload) que utilitza switch).
  11. Incloure validacions bàsiques (p. ex. títol no buit, date válida si és introduïda).
  12. Proporcionar una petita sèrie de tasques d'exemple carregades per defecte perquè la funcionalitat es pugui provar sense haver d'afegir-ne de noves.

Requisits tècnics / restriccions:

  • No s'utilitzin llibreries externes (només JavaScript pur).
  • Fer ús d'alguns mètodes d'Array natius (map, filter, reduce, sort, forEach) en punts rellevants.
  • Els esdeveniments han de gestionar-se via addEventListener.
  • Estructura HTML neta i semàntica (form, section, ul/ol per la llista, buttons).
  • El codi ha d'estar organitzat en funcions petites i ben documentades (comentaris).

Entregables:

  1. Fitxer HTML mínim (inclosos estils inline o CSS mínim) + script JavaScript integrat o extern.
  2. Explicació breu (1-2 paràgrafs) de com provar l'aplicació i casos de prova bàsics.

Casos de prova:

  • Afegir una tasca amb títol i data; comprovar que apareix a la llista.
  • Marcar una tasca com a completada; comprovar que els comptadors s'actualitzen.
  • Filtrar per prioritat "high" i comprovar que només es mostren les de prioritat alta.
  • Ordenar per data ascendent i comprovar l'ordre.
  • Eliminar una tasca i comprovar que desapareix i que les estadístiques es recalculen.
  • Recarregar la pàgina (si s'ha implementat localStorage) i comprovar que les tasques persisteixen.

Indicacions i pistes (no són resolució completa):

  • Genera id amb un contador o amb Date.now() + Math.random().
  • Per a prioritat, utilitza una convenció numèrica per facilitar la ordenació (p. ex. high=3, medium=2, low=1) i utilitza switch per transformar entre codi i etiqueta.
  • Per mostrar les dates, utilitza Date i métodos com toLocaleDateString() per formatar-les.
  • Per gestionar etiquetes, separa la cadena per comes, neteja espais i elimina duplicats amb Set.
  • Usa innerHTML amb cura; millor creació d'elements DOM amb createElement per a cada tasca.
  • Mantingues l'estat de filtratge/ordenació com a variables i re-renderitza la llista quan canvia l'estat.
  • Calcula percentatges amb Math.round per evitar decimals llargs.
  • Implementa la persistència en localStorage serialitzant amb JSON.stringify i parsejant amb JSON.parse.

Extensió opcional (per punts addicionals):

  • Cerca per text (títol/descripció) amb includes o expressions regulars.
  • Edició d'una tasca existent.
  • Drag & drop per reordenar tasques (més complex).