Time tracking dashboard with typing animation

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

I'm proud of going a bit above and beyond for this solution. Initially, I was thinking of just completing it regularly, but I want to be able to grow from the projects I create on here, so I decided to add a typing animation. It's not much, but it's setting the precedent for my projects to come.

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

The typing animation whenever a timeframe button was pressed caused the most trouble for this project. Whenever I was first watching tutorials about HTML/CSS/JS, they used the concept of namespaces for declaring elements, and using that concept turned out to be beneficial when selecting the elements for the typing animation.

However, I had a bit of trouble editing the text for the animation, since originally I was editing the innerText property of each element, but the typing cursors for the animation was contained inside each element that I was editing. If I changed the innerText of 1hr|, so that it said "2hrs" instead it resulted in 2hrs and the span getting overridden. I overcame this by recalling the concept of the DOM tree from the tutorials I watched -- I updated the text node (e.g. paragraphElement.childrenNode[0].nodeValue) instead of the innerText.

I'm gonna try to incorporate these concepts more in my future frontend projects, and apply more structure to my code so that I can improve the readability as well.