Requirements

Create an HTML document contact.html which links an external stylesheet contact.css and an external JavaScript file contact.js. The HTML file should define the following form:

id=form

action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi

method="POST">

[+]

In contact.js, create a function called getSubmitButton that retrieves the first input element of type=submit in the DOM. This function may use the methods getElementsByTagName and elem.getAttribute.

Create another function called getEmailInputs that retrieves an array of all the input elements with type=email on the page. This function will be very similar to getSubmitButton above.

Create a function called makeNew which will create a div following the template below and insert it before the submit button inside the form (this has the effect of appending the div below all other divs created previously). You must use the function getSubmitButton. Do not add an ID to the submit button. Replace below with a unique number (hint: use a global integer that you increment each time you create a div).

>Email

name=emails[]

placeholder=robert.paulson@hotmail.com required />

[-]

Bind the onclick event of the new element to the function makeNew. Additionally, call makeNew three times on page load so that the form has three fields by default (do not do this using HTML).

Also make sure you bind the onclick event of the [-] link you create inside of the div to a function that will remove the entire div from the DOM (hint: use elem.parentNode and elem.removeChild functions).

Form Submission

Bind to the onsubmit event of the form a function which does the following. (Note that returning true from this function will allow the form to be submitted and returning false from this function will stop the form from being submitted to the server - this is good for validation). Loop over the email elements on the page (use your getEmailInputs function) and make sure that all of the emails in the inputs are unique. Return true if there are no duplicate emails. Return false otherwise. If any two emails have the same value, you should change their font color to red.

Styling

The following styling must be present in your submission.

Label and header text should be sans-serif

Links should be monospace and underline should only be present on hover

The [+] link should be blue and the [-] link should be red

The [-] link should be pulled away from the form input

Email inputs should span 300px (total)

The submit button should line up with the email inputs above it

All inputs should have a rounded border colored rgb(192,192,192) (hint: use border-radius)

All inputs should have 1.5 line height

See the image below for reference. Do not add ids or classes to the dynamically created divs other than what was specified above.

Spam ulator 2000 Email #1 robert paulson@hotmail.com Email #2 robert paulson@hotmail.com Email #3 robert paulson@hotmail.com Submit +1