Time Tracking Dashboard

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

For this challenge I implemented a tab interface for the first time. This challenge also involved creating clickable cards, which I did have some experience with, however, this time, the card contains another interactive element, a disclosure button. I was very happy that I can activate the hover states for the cards by hovering with the mouse, but also tabbing through each each. But moreover, that the hover state is de-activated by either hovering or tabbing to the ellipsis button within the card.

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

Particularly difficult for me was implementing the arrow key navigation in the tab panel. For this I set an event listener for a keydown event and a switch statement to determine the direction of the arrow key press (left, right, up, or down). Based on the direction it calculates the index of the next tab to focus on. I used the modulus operator % to ensure that the index of the next tab loops back to the beginning or end of the array when navigation with the arrow keys.

I also encountered an issue where the background colors for each different activity type were overlapping the bottom corners of the cards, exposing a sliver of color. For this I created a pseudo element for each card, on the div containing the whole card, giving it an absolute position and 50% bottom. By applying the background color to this pseudo element, the color never reaches the bottom of the card, thus avoiding any color overflow on the bottom corners.

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

I am always looking to improve accessibility best practices.