Time Tracking Dashboard 🫡

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

I'm happy with the animations and how they turned out. I might have changed how I handle populating the data for current and previous times on each card.

Currently, this is how I'm doing it:

const populateDashboard = (data, time) => {
    for (let i = 0; i < data.length; i++) {
        const { current, previous } = data[i].timeframes[time];
        currentStats[i].textContent = `${current}hrs`;
        previousStats[i].textContent = `${previous}hrs`;
    }
}

As long as the data is all in order, then this should work.

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

A challenge with styling was the background colors for each card. I had to set the parent container for each card to

position: relative;

and then have a background div set to

position: absolute;
border-bottom-right: 2rem;
border-bottom-left: 2rem;

Additionally, I set bottom border radius to twice that of the container's border radius so that I wouldn't see the corner of the background div.

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

I'd like any suggestions on how to populate the cards data a better way if possible, thanks!