This is a solution to the Time Tracking Dashboard challenge from Frontend Mentor. It is a responsive web application that displays a user's time tracking data and allows switching between daily, weekly, and monthly views for each activity.
Main features: fully responsive design from mobile to desktop; on large screens a four-column grid layout is used; on small screens a single-column grid; adaptation of flex direction, gap, font size, width, and padding depending on the device; view switching by clicking the daily, weekly, and monthly tabs; tab color changes on hover and click; dynamic updating of card content when selecting each tab; hover effect that changes color on cards and ellipsis icons; data dynamically populated from a local JSON file; use of fetch to retrieve data; for each card, title, hours, and previous data are dynamically inserted using JSON values; use of template literals in JavaScript and querySelectorAll with forEach to populate information across all cards.
Challenges and improvements: I found that the CSS hover state of the tabs was being overridden by the click logic controlled by JavaScript. To solve this, I managed color changes from JavaScript by controlling the boolean state of each tab and handling mouseenter, mouseleave, and click events. The solution worked but led to repetitive code. A more scalable improvement is to use CSS classes like active for the selected tab and toggle those classes from JavaScript, separating style from logic and improving maintainability.
Technologies used: HTML5, CSS, JavaScript with modern techniques for DOM manipulation and consumption of local JSON.
Live site link: https://lilythelily.github.io/time-tracking/ Video demonstration: https://youtu.be/beN3K1YZGs0
About Q2BSTUDIO: Q2BSTUDIO is a custom software and application development company specialized in enterprise solutions. We offer custom software, custom application development, artificial intelligence services and AI for businesses, AI agents, and Power BI solutions. We also provide cybersecurity services, consulting, and cloud deployment with AWS and Azure cloud services, and business intelligence services to transform data into actionable decisions.
How Q2BSTUDIO can help with projects like this: we can professionalize the application with backend integration, secure APIs, deployment on AWS and Azure cloud services, monitoring and cybersecurity auditing, and add artificial intelligence capabilities for predictive analysis and personalization. We also implement dashboards with Power BI and business intelligence services that turn usage data into insights that drive decision-making.
Relevant keywords for positioning: custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, Power BI. If you are looking to scale this project into a robust enterprise solution, contact Q2BSTUDIO to evaluate architecture, security, and data strategy.
