Time tracking dashboard by Ariel

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

I'm particularly proud to have completed this project without using a front-end framework. I handled all DOM creation, data binding and interactivity using vanilla JavaScript only, which really pushed me to understand how everything works behind the scenes. I also built a clean SCSS architecture with partials, variables and a mobile-first approach, which helped me stay organized and efficient.

If I had it to do over again, I'd improve the structure of my JavaScript code by separating concerns into smaller functions or modules. I'd also investigate the possibility of adding transitions or animations to make the experience smoother when moving from one time frame to another. Finally, I'd like to pay more attention to accessibility, using better semantic elements and testing keyboard navigation.

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

One of the main challenges I faced was building the layout to match both mobile and desktop design, in particular aligning icons and elements precisely using CSS Grid and Flexbox. It took several tries to get the positioning of the activity cards and ellipse icon right.

Another challenge was to dynamically generate all the activity maps using JavaScript. I had to carefully manage class names, icons and text updates according to the selected period. At first, my logic was a little repetitive, but I refined it by using loops and making the code more dynamic.

Finally, to keep the layout consistent from one period to the next (so that the cards don't jump in height when switching from one period to the next), I had to define fixed heights and better spacing strategies.

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

I'd love to get feedback on how I've structured my JavaScript code, particularly with regard to DOM manipulation and how I've handled dynamic rendering of activity maps. I've kept everything in a single function for now, but I'm not sure that's the most scalable or maintainable approach.

I'm also open to suggestions on how to improve my SCSS layout on the desktop version. It works visually, but I feel it could be more flexible or cleaner in terms of grid placement and spacing.

Finally, I'd like to learn how to make my code more accessible (a11y), especially for screen readers or keyboard navigation, as I haven't spent much time on this in this version.