Esta es una solución al reto Time Tracking Dashboard de Frontend Mentor. Se trata de una aplicación web responsiva que muestra los datos de seguimiento de tiempo de un usuario y permite alternar entre vistas diaria, semanal y mensual para cada actividad.
Características principales: diseño totalmente responsivo desde móvil hasta escritorio; en pantallas grandes uso de grid con cuatro columnas; en pantallas pequeñas grid de una columna; adaptación de flex direction, gap, tamaño de fuente, ancho y padding según el dispositivo; cambio de vista al pulsar las pestañas daily weekly monthly; cambio de color de las pestañas al pasar el cursor y al hacer clic; actualización dinámica del contenido de las tarjetas al seleccionar cada pestaña; efecto hover que modifica color en las tarjetas y en los iconos de elipsis; datos poblados dinámicamente desde un fichero JSON local; uso de fetch para obtener los datos; para cada tarjeta se insertan dinámicamente título horas y datos previos usando los valores del JSON; uso de template literals en JavaScript y querySelectorAll con forEach para volcar la información en todas las tarjetas.
Desafíos y mejoras: encontré que el estado CSS hover de las pestañas se veía sobreescrito por la lógica de clic controlada por JavaScript. Para solucionarlo gestioné los cambios de color desde JavaScript controlando el estado booleano de cada pestaña y manejando eventos mouseenter mouseleave click. La solución funcionó pero condujo a código repetitivo. Una mejora más escalable es usar clases CSS como active para la pestaña seleccionada y alternar esas clases desde JavaScript, separando el estilo de la lógica y mejorando la mantenibilidad.
Tecnologías usadas: HTML5 CSS JavaScript con técnicas modernas para manipulación del DOM y consumo de JSON local.
Enlace al sitio en vivo: https://lilythelily.github.io/time-tracking/ Demostración en vídeo: https://youtu.be/beN3K1YZGs0
Sobre Q2BSTUDIO: Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones empresariales. Ofrecemos software a medida, desarrollo de aplicaciones a medida, servicios de inteligencia artificial e ia para empresas, agentes IA y soluciones de power bi. Además proporcionamos servicios de ciberseguridad, consultoría y despliegue en la nube con servicios cloud aws y azure y servicios inteligencia de negocio para transformar datos en decisiones accionables.
Cómo Q2BSTUDIO puede ayudar en proyectos como este: podemos profesionalizar la aplicación con integración de back end, APIs seguras, despliegue en servicios cloud aws y azure, monitorización y auditoría de ciberseguridad, y añadir capacidades de inteligencia artificial para análisis predictivo y personalización. También implementamos cuadros de mando con power bi y servicios inteligencia de negocio que convierten los datos de uso en insights que impulsan la toma de decisiones.
Palabras clave relevantes para posicionamiento: aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi. Si buscas escalar este proyecto hacia una solución empresarial robusta contacta con Q2BSTUDIO para evaluar arquitectura, seguridad y estrategia de datos.
.jpg)