Build Visual Project Timelines and Gantt Charts Create simple project timelines and Gantt charts with task scheduling and milestone tracking.

The tool works under the hood by utilizing React's useState and useMemo hooks to manage task data and compute timeline properties. It stores tasks as an array of objects with id, name, start, end, and color properties, using TypeScript to enforce type safety. The addTask function creates a new task object with a unique id generated from the current timestamp, while the removeTask function filters out the task by its id. The updateTask function updates a specific task property using the spread operator to preserve existing data.

The tool uses JavaScript Date objects for date math calculations, computing the minimum and maximum dates of all valid tasks and calculating the total duration in days. It then applies CSS positioning to render tasks as horizontal bars on the timeline, with left and width properties calculated based on the start date offset and task duration relative to the total timeline duration. The getBarStyle function computes these styles for each task, taking into account the minDate, maxDate, and totalDays values computed by useMemo.

The tool also utilizes CSS classes defined in a separate stylesheet, such as glass-card and glass-input, to style its user interface components. Additionally, it uses React's event handling mechanisms, like onChange and onClick, to respond to user interactions with task input fields and buttons. The getMonthMarkers function generates an array of month marker objects with label and position properties, using the Date object's toLocaleDateString method to format the month labels. These markers are then rendered as absolute-positioned spans within a container element, providing context to the timeline.