Write some Software

Overview ------------ The scope of this project is to allow a user to create html containers directly on the browser with a left mousedown and then dragging to create their desired height and width. Onmousedown, an options box will display for the user to select the type of html element to create. The user can also select if the element being created is suppose to be a fixed width or by percentage; for the height, it will default to min-height, but in the options box, the user can de-select, which will create a more natural flow. Outline --------- 1) Mousedown and drag left, right, up or down to define the width and height of the element. 2) Once the user releases the mouse a non modal pop up (floating div) will appear for them to select the type of element. e.g.: div, section, span, input field, checkbox, etc. 3) OnMouseDown within another element, it will detect the parent and create itself inside that element. 4) The edges of each element will have a triangle on each corner. These triangles will allow the elements to be resized in all directions (left, right, up, or down). 5) When resizing an element, the edges cannot cross one another and become negative. 6) When the user hovers over an element, the edges will glow. 7) Assign a unique css for all elements created using this method. 8) Do not allow other css that may be part of the website to cascade and change the design. 9) The options box should have a list of non deprecated HTML/5 elements. I will send that list. 10) Add a unique css class that gives a default padding and margin to it is easy to distinguish one element from another. 11) When creating, the user can select whether the width is fixed (set by the amount they drag), or a percentage (set with a percentage and determined by the browser size). 12) When creating, the user can select whether the height has a min-height; fixed (will cause overflow); or natural (no height set). 13) The elements style will hold the properties. jQuery .css can be used. 14) No 3rd party framework libraries (e.g. bootstrap). 15) Clicking the checkbox for Margin, will create a margin:0 auto 0 auto; which will cause the element to be centered. 16) When changing the type of element (default to “Div”), an additional area will expand and list an icon for the element along with a brief description of what the element is used for. *Attached is a document detailing the same specifics shown above along with an example image.