Timeline Creator

The line tool needs to allow the user to draw a connecting line from the timeline to the event object (text box, graphical element, etc.) Add font control tools for font size, bold, italic, etc. Include several font choice options.

Prompt

Code in html, css, and JavaScript a self-contained, complete, and embeddable timeline generation tool. Use a navy blue, white, black, and gray theme for a professional look. Add a user input box to specify the beginning and end points of the timeline with the desired number of divisions. For example, for a life timeline, the user may specify starting at birth and ending at age 12 with yearly divisions, or from 1861 to 1865 with yearly and monthly divisions, or from the prologue to the end of the novel with 17 divisions. Use this website for format ideas: https://www.magnific.com/free-photos-vectors/timeline-template Allow user input for links to websites, images, video clips, text, and a wide variety of graphic formats to generate a highly useable and eye-catching timeline. Allow video playback from the timeline. Allow drag and drop functionality. Allow user to connect the image, text, video, or graphic to the timeline event date with a line tool. Include a line color selector along with a line width slider. Also add an Organize Layout button to automatically clean up layout issues. Add a download button so the user can keep the timeline in png or pdf format. 

Iteration

If I try to edit the start and endpoints and then click Generate Axis, the redraw fails and I am left with a blank screen. Double check the code to ensure that Generate Axis following a change to the start and end points always redraws the axis. Allow user to select the image from a folder without always having to use drag and drop.

Iteration 2

Allow the user to zoom in and out on the timeline for a better view. Allow user to freely drag text boxes, images, links, and videos to the desired position.

Iteration 3

Allow user to resize the text box, graphical element, or video window.

Iteration 4

Add a Timeline Scale slider to allow the user to adjust the length of the timeline so that it will fit the screen and any print size when downloaded.

Iteration 5

Apparently, there are hidden text boxes below the timeline that interfere with the line tool. If the user adds an image or text box below the timeline and connects it with a line, the line has a light gray shadow on it caused by the hidden text box. Remove the hidden text boxes. Double check the code to ensure that the boxes are gone. Also, allow the user to paste content into the timeline if possible.