Time tracking dashboard

Solution retrospective
I wanted to find a way to update content inside components without triggering a full re-render, and I managed to achieve that.
My approach involved using the dataset property of HTML elements to inject dynamic text content directly — which allowed me to keep DOM structure stable and only update the relevant text.
What challenges did you encounter, and how did you overcome them?const currentHours = clone.querySelector("[data-current]") as HTMLElement; currentHours.dataset.daily = String(item.timeframes.daily.current) + "hrs"; currentHours.dataset.weekly = String(item.timeframes.weekly.current) + "hrs"; currentHours.dataset.monthly = String(item.timeframes.monthly.current) + "hrs";
One of the more confusing parts was figuring out how to map each card type to its corresponding background image and color.
Eventually, I realized that a simple Record<string, object>
map with Tailwind class strings did the job cleanly and flexibly.
What specific areas of your project would you like help with?const styleMap: Record<string, { bgColor: string; bgImage: string }> = { Work: { bgColor: "bg-orange-300", bgImage: "bg-[url(/images/icon-work.svg)]", }, Play: { bgColor: "bg-blue-300", bgImage: "bg-[url(/images/icon-play.svg)]", }, Study: { bgColor: "bg-pink-400", bgImage: "bg-[url(/images/icon-study.svg)]", }, Exercise: { bgColor: "bg-green-400", bgImage: "bg-[url(/images/icon-exercise.svg)]", }, Social: { bgColor: "bg-purple-700", bgImage: "bg-[url(/images/icon-social.svg)]", }, "Self Care": { bgColor: "bg-yellow-400", bgImage: "bg-[url(/images/icon-self-care.svg)]", }, };
I’d be curious to learn if there’s a more efficient or idiomatic approach to re-rendering content without fully rebuilding the DOM structure.
If there’s a cleaner solution — especially leveraging TypeScript more deeply — I’d be very interested in seeing how it could be implemented.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Steno-95
I really like your solution for each background color, good job! i have yet to pick up typescript so can't really help you on that..
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord