Range: Basic representation of a moment in your life

Something as simple as two vertical bars, one horizontal and one text appear to be easier than it was. At the moment it starts changing adding more properties, it becomes quite messy.

The initial implementation was 4 components: 3 lines and 1 text, but this kills all the space for click actions, meaning that I need a component that covers all the clickable area so we can select an event.

So after several tries, I ended with just two divs. The first one is for the vertical lines and the second for the text and the horizontal line.

Implementing a Range with two divs

The rest, was just implementing the math behind, and test:

Testing several Ranges with different conditions

Event Creation

The other focus was the event creation. It was difficult to play with all the onMouseEvents, and still, I don't think this is the final implementation. But working for now.

Also, I add localStorage support, so after the restart of the window it works.

This is the final result:

creating events in kalena

You can play now in day9.kalena.dev/life.

Thanks for reading. Let me know what you think on Twitter.