Write HTML/javascript for web map functionality

The task is to write the HTML and javascript to perform the following functionality: 1. On the top of an openlayers web map, allow a user to draw and edit one or multiple polygons over the top of the map. Each of the polygons drawn will be added to a list in an overlay panel on the map. 2. The polygons will be prenamed as shape 1, shape 2 etc. The user will have the ability to edit these names. 3. The panel will also display the area in hectares for each polygon, and a calculated cost for each. The cost will be calculated from variables and a formula, which the host can edit in the HTML file or javascript. The total cost will be displayed at the bottom of the list of polygons, and updated as extra polygons are drawn, or existing polygons are edited. 4. The user can start again by clicking a 'clear order' button. 5. The panel will also have the following form fields to enter at the top of the list of polygons: • Name (required) (text field) • Company (text field) • Email address (required) (text field) • Phone number (text field) • Accept terms and conditions (required) (tickbox) 6. After drawing the polygons and entering the above required information, the user can then submit the order by clicking a 'Submit Order' button at the bottom of the panel. A pop-up will then display 'thank you for your order. A representative will contact you shortly to confirm your order'. 7. Upon clicking 'Submit Order' the polygons will be written to a kml file and stored in an 'orders' folder. The KML file should be named [login to view URL] (ie 20150926_1722_Joe [login to view URL]) 8. In the KML structure, the polygons should retain their name. The description tag in the KML file should contain the form data, the name and cost of the polygons, as well as the total cost. For example: "Joe Bloggs Company email address phone number shape 1: $50 shape 2: $77 shape 3: $28 Total cost: $155" Javascript libraries that may help are leaflet, turf, openlayers, mapbox libraries Thanks!