Documentation Index
Fetch the complete documentation index at: https://mintlify.com/chrisdzasc/Time-Tracking-Dashboard/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Time Tracking Dashboard allows users to switch between three different time views: Daily, Weekly, and Monthly. This feature dynamically updates all activity cards to show the corresponding time data without page reload.
Button Implementation
The timeframe buttons are implemented as three button elements within the profile card (index.html:38-42):
<div class="profile-card__options">
<button class="profile-card__option text--p5-regular" id="daily">Daily</button>
<button class="profile-card__option profile-card__option--active text--p5-regular" id="weekly">Weekly</button>
<button class="profile-card__option text--p5-regular" id="monthly">Monthly</button>
</div>
The Weekly button is set as active by default using the profile-card__option--active class.
Event Listeners
Each button is connected to its corresponding function through event listeners (app.js:109-113):
daily.addEventListener("click", dailyActivity);
weekly.addEventListener("click", weeklyActivity);
monthly.addEventListener("click", monthlyActivity);
const daily = document.querySelector('#daily');
const weekly = document.querySelector('#weekly');
const monthly = document.querySelector('#monthly');
Timeframe Functions
Each timeframe has a dedicated function that updates all activity cards with the corresponding data.
Daily Activity Function
The dailyActivity() function (app.js:38-60) updates all cards with daily statistics:
function dailyActivity() {
removeActiveClasses();
daily.classList.add("profile-card__option--active");
workCurrent.innerText = dashboardData[0].timeframes.daily.current;
workPrevious.innerText = dashboardData[0].timeframes.daily.previous;
playCurrent.innerText = dashboardData[1].timeframes.daily.current;
playPrevious.innerText = dashboardData[1].timeframes.daily.previous;
studyCurrent.innerText = dashboardData[2].timeframes.daily.current;
studyPrevious.innerText = dashboardData[2].timeframes.daily.previous;
exerciseCurrent.innerText = dashboardData[3].timeframes.daily.current;
exercisePrevious.innerText = dashboardData[3].timeframes.daily.previous;
socialCurrent.innerText = dashboardData[4].timeframes.daily.current;
socialPrevious.innerText = dashboardData[4].timeframes.daily.previous;
selfCareCurrent.innerText = dashboardData[5].timeframes.daily.current;
selfCarePrevious.innerText = dashboardData[5].timeframes.daily.previous;
}
Weekly Activity Function
The weeklyActivity() function (app.js:62-83) follows the same pattern for weekly data:
function weeklyActivity() {
removeActiveClasses();
weekly.classList.add("profile-card__option--active");
workCurrent.innerText = dashboardData[0].timeframes.weekly.current;
workPrevious.innerText = dashboardData[0].timeframes.weekly.previous;
playCurrent.innerText = dashboardData[1].timeframes.weekly.current;
playPrevious.innerText = dashboardData[1].timeframes.weekly.previous;
studyCurrent.innerText = dashboardData[2].timeframes.weekly.current;
studyPrevious.innerText = dashboardData[2].timeframes.weekly.previous;
exerciseCurrent.innerText = dashboardData[3].timeframes.weekly.current;
exercisePrevious.innerText = dashboardData[3].timeframes.weekly.previous;
socialCurrent.innerText = dashboardData[4].timeframes.weekly.current;
socialPrevious.innerText = dashboardData[4].timeframes.weekly.previous;
selfCareCurrent.innerText = dashboardData[5].timeframes.weekly.current;
selfCarePrevious.innerText = dashboardData[5].timeframes.weekly.previous;
}
The weeklyActivity() function is called on initial load (app.js:10) to set the default view.
Monthly Activity Function
The monthlyActivity() function (app.js:85-106) handles monthly statistics:
function monthlyActivity() {
removeActiveClasses();
monthly.classList.add("profile-card__option--active");
workCurrent.innerText = dashboardData[0].timeframes.monthly.current;
workPrevious.innerText = dashboardData[0].timeframes.monthly.previous;
playCurrent.innerText = dashboardData[1].timeframes.monthly.current;
playPrevious.innerText = dashboardData[1].timeframes.monthly.previous;
studyCurrent.innerText = dashboardData[2].timeframes.monthly.current;
studyPrevious.innerText = dashboardData[2].timeframes.monthly.previous;
exerciseCurrent.innerText = dashboardData[3].timeframes.monthly.current;
exercisePrevious.innerText = dashboardData[3].timeframes.monthly.previous;
socialCurrent.innerText = dashboardData[4].timeframes.monthly.current;
socialPrevious.innerText = dashboardData[4].timeframes.monthly.previous;
selfCareCurrent.innerText = dashboardData[5].timeframes.monthly.current;
selfCarePrevious.innerText = dashboardData[5].timeframes.monthly.previous;
}
Active State Management
The removeActiveClasses() function (app.js:32-36) ensures only one button is active at a time:
const buttons = [daily, weekly, monthly];
function removeActiveClasses() {
buttons.forEach(button => {
button.classList.remove("profile-card__option--active");
});
}
- Iterates through all three buttons
- Removes the
profile-card__option--active class from each
- Is called at the start of each timeframe function before adding the active class to the selected button
CSS Styling
The active button receives visual feedback through CSS (styles.css:254-257):
.profile-card__option--active,
.profile-card__option:hover {
color: var(--white);
}
.profile-card__option {
border: none;
padding: 0;
color: var(--purple-500);
background-color: transparent;
cursor: pointer;
transition: color 0.2s ease-in-out;
}
Data Flow
- User clicks a timeframe button
- Event listener triggers the corresponding function
removeActiveClasses() clears all active states- New button receives the active class
- All activity card values are updated from
dashboardData array
- UI updates instantly without page reload