Time Tracking Dashboard using CSS FlexBox and Grid

What are you most proud of, and what would you do differently next time?

proud of how I utilized the 'data-' attribute

in CSS =>

#main .daily,
#main .weekly,
#main .monthly {
    display: none;
}
#main[data-theme='daily'] .daily,
#main[data-theme='weekly'] .weekly,
#main[data-theme='monthly'] .monthly{
    display: flex;
}

in javascript =>

function changeToTheme(btn) {
    const btns = [dayBtn, weekBtn, monthBtn];

    for (const btn of btns) { 
        btn.classList.remove('active');
    }

    btn.classList.add('active');
    main.dataset.theme = btn.id;
}

dayBtn.addEventListener('click', () => { 
    changeToTheme(dayBtn);
});

weekBtn.addEventListener('click', () => { 
    changeToTheme(weekBtn);
});

monthBtn.addEventListener('click', () => {
    changeToTheme(monthBtn);
 });

in HTML

               
                    ${item.timeframes.weekly.current}hrs
                    Last Week - ${item.timeframes.weekly.previous}hrs
                
                
                    ${item.timeframes.daily.current}hrs
                    Yesterday - ${item.timeframes.daily.previous}hrs
                
                
                    ${item.timeframes.monthly.current}hrs
                    Last Month - ${item.timeframes.monthly.previous}hrs
                

What challenges did you encounter, and how did you overcome them?

working with the 'data-' attributes was a little confusing, loads of googling helped

What specific areas of your project would you like help with?

None for now. But any feedback is welcome, Thanks!!!!