Exercici intermedi: Gestió mínima de Rent-a-Car

Objectius: - Practicar bucles (for, for...of), condicionals (if/else), i switch/case. - Manipular arrays amb operacions comunes (afegir, eliminar, filtrar, ordenar, 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 (classes). - Escriure funcions natives i pròpies reutilitzables. - Càlculs senzills relacionats amb dates (nombre de dies) i tarifes.

Descripció general: Crea una aplicació web de tipus "Rent-a-Car (mínim)" que permet gestionar un parc de vehicles i lloguers bàsics. L'aplicació no ha de ser completa, però ha d'incloure les funcionalitats bàsiques per a practicar els conceptes mencionats.

Entregables: 1. Un únic fitxer HTML amb CSS mínim i JavaScript (integrat o extern). 2. Un fitxer de text amb la solució comentada pas a pas (explicacions de les decisions clau).

Requisits funcionals (mínims): 1. Gestió del parc de vehicles: - Formulari per afegir un vehicle: marca/model, matrícula, tipus (cotxe, furgoneta, etc.), tarifa diària, estat inicial (available / maintenance). - Afegir el vehicle a un array en memòria i mostrar-lo al DOM en forma de llista o taula. - Permetre eliminar un vehicle (només si no està llogat). 2. Gestió de lloguers: - Formulari per crear un lloguer: seleccionar vehicle disponible, nom client, data d'inici, data de finalització. - Calcular la durada en dies i el preu total (dies * tarifa diària). - Marcar el vehicle com a "rented" mentre dura el lloguer. - Permetre tancar/retornar un lloguer (marcar vehicle com a available) i registrar la data de retorn. 3. Filtrat i ordenació: - Filtrar vehicles per estat (Tots / Available / Rented / Maintenance). - Ordenar per tarifa diària (asc/desc) o per marca/model. 4. Estadístiques: - Total de vehicles. - Vehicles disponibles. - Vehicles llogats. - Ingressos totals calculats a partir dels lloguers tancats (usar reduce). 5. Persistència: - Desa els vehicles i lloguers a localStorage perquè la informació persisteixi entre recarregades. 6. Estructura i bones pràctiques: - Utilitza classes (p. ex. Vehicle i RentalManager o FleetManager) per encapsular la lògica. - Usa addEventListener per gestionar esdeveniments. - Utilitza mètodes d'array (map, filter, reduce, sort, forEach) en punts clau. - Inclou un switch/case com a part d'una funció que executi accions segons una opció (p. ex. handleAction(action, payload)). 7. Validacions: - El formulari de vehicle ha de requerir marca/model, matrícula i tarifa positiva. - El formulari de lloguer ha de verificar que la data final és posterior a la data d'inici i que el vehicle està disponible. 8. Dades d'exemple: - Carrega automàticament 3 vehicles de mostra a l'inicialització per facilitar les proves.

Casos de prova suggerits: - Afegir un vehicle amb dades correctes i comprovar que apareix a la llista. - Crear un lloguer amb un vehicle disponible i comprovar que el vehicle canvia d'estat a "rented". - Intentar crear un lloguer amb dates incorrectes i comprovar validació. - Retornar un vehicle i comprovar que l'estat torna a "available" i que s'actualitzen ingressos (si es tanca el lloguer). - Filtrar la llista per estat i comprovar resultats. - Ordenar la llista per tarifa ascendent/descendent. - Recarregar la pàgina i comprovar que les dades persisteixen.

Pistes i consells: - Genera ids únics amb Date.now() + Math.random(). - Emmagatzema dates en format ISO (YYYY-MM-DD) per facilitar comparacions i ordenacions. - Per calcular dies entre dues dates utilitza la diferència en mil·lisegons i divideix per (1000 * 60 * 60 * 24) i aplica Math.ceil o Math.floor segons la definició que provis (normalment inclusive => +1 si cal). - Mantingues l'estat UI (filtres i ordre) en variables i re-renderitza la vista quan canviïn. - Mantingues la lògica de dades separada del DOM: FleetManager s'encarrega de la lògica, la interfície només mostra i captura esdeveniments. - Evita usar innerHTML amb dades no escapades; prefereix createElement i textContent per seguretat.