Aquesta és una solució al repte Time Tracking Dashboard de Frontend Mentor. Es tracta d'una aplicació web responsiva que mostra les dades de seguiment de temps d'un usuari i permet alternar entre vistes diària, setmanal i mensual per a cada activitat.
Característiques principals: disseny totalment responsiu des de mòbil fins a escriptori; en pantalles grans ús de grid amb quatre columnes; en pantalles petites grid d'una columna; adaptació de flex direction, gap, mida de font, amplada i padding segons el dispositiu; canvi de vista en prémer les pestanyes daily weekly monthly; canvi de color de les pestanyes en passar el cursor i en fer clic; actualització dinàmica del contingut de les targetes en seleccionar cada pestanya; efecte hover que modifica el color a les targetes i a les icones d'el·lipsi; dades poblades dinàmicament des d'un fitxer JSON local; ús de fetch per obtenir les dades; per a cada targeta s'insereixen dinàmicament títol, hores i dades prèvies utilitzant els valors del JSON; ús de template literals en JavaScript i querySelectorAll amb forEach per abocar la informació a totes les targetes.
Reptes i millores: vaig trobar que l'estat CSS hover de les pestanyes es veia sobreescrit per la lògica de clic controlada per JavaScript. Per solucionar-ho vaig gestionar els canvis de color des de JavaScript controlant l'estat booleà de cada pestanya i gestionant esdeveniments mouseenter mouseleave click. La solució va funcionar però va conduir a codi repetitiu. Una millora més escalable és utilitzar classes CSS com active per a la pestanya seleccionada i alternar aquestes classes des de JavaScript, separant l'estil de la lògica i millorant el manteniment.
Tecnologies utilitzades: HTML5, CSS, JavaScript amb tècniques modernes per a la manipulació del DOM i consum de JSON local.
Enllaç al lloc en viu: https://lilythelily.github.io/time-tracking/ Demostració en vídeo: https://youtu.be/beN3K1YZGs0
Sobre Q2BSTUDIO: Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialitzada en solucions empresarials. Oferim programari a mida, desenvolupament d'aplicacions a mida, serveis d'intel·ligència artificial i IA per a empreses, agents IA i solucions de Power BI. A més, proporcionem serveis de ciberseguretat, consultoria i desplegament al núvol amb serveis cloud AWS i Azure i serveis d'intel·ligència de negoci per transformar dades en decisions accionables.
Com Q2BSTUDIO pot ajudar en projectes com aquest: podem professionalitzar l'aplicació amb integració de back end, API segures, desplegament en serveis cloud AWS i Azure, monitorització i auditoria de ciberseguretat, i afegir capacitats d'intel·ligència artificial per a anàlisi predictiva i personalització. També implementem quadres de comandament amb Power BI i serveis d'intel·ligència de negoci que converteixen les dades d'ús en insights que impulsen la presa de decisions.
Paraules clau rellevants per al posicionament: aplicacions a mida, programari a mida, intel·ligència artificial, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci, IA per a empreses, agents IA, Power BI. Si busques escalar aquest projecte cap a una solució empresarial robusta, contacta amb Q2BSTUDIO per avaluar arquitectura, seguretat i estratègia de dades.
