Time to do it! Used AI

Now one can import their exported TODOs again.

Now one can export their TODOs, including the active ones and the history.
The file does not save if timers are running, so they are paused when imported again. This is intended, timers should not remain running while exported.

Here I needed to implement an edgecase check: If someone marks a TODO with a running timer as completed the timers have to be stopped before moving it to the history

Timer are implemented now! Whohoo!
Timers can run simultaniously and also keep running when the tab gets closed.

Now one can use the edit button to switch into the edit mode, then one can edit the name and the description. The edits can be canceled by selecting an other TODO element or be confirmed by pressing the confirm button. The edits get saved in the local storage so when one refreshes the page they persist.

I implemented that when you ceck a todo element it gets moved to the todo history. you can view the history on the history page. If you uncheck the element it moves back to the TODO page.

Now one can add and remove TODOs
TODO Elements are stored in the local storage of the browser so they persist after reloading

To support multiple Pages on the Website for the Graphs, the About page and history, I added a super simple router that just pastes the right content into the page depending the URI

It took quite some time, but I'm kinda happy with the UI now. I redesigned the UI to add a new TODO Element, now there is space to add a Description from the beginning. The design is not finished, as example, I will change the colors later, these are just placeholders, but for right now I need to implement some features, if I keep bothering about the UI I will go insane.

Okay, I really hate styling! I just can't get it right. Enough for today.

It's getting closer to the concept

I started of by drawing a concept sketch of how the UI should look like, now I am trying to implement this design as a mockup UI