Requirements Create an HTML document contact.html which links an external styles

ID: 3788756 • Letter: R

Question

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

Explanation / Answer

<!doctype html>

<head>

<title>Trinity Temple</title>

</head>

<body>

<h1>Trinity Temple</h1>

<h3>  And I sent messengers unto them,saying,Iam doing a great work,so that i cannot come down: </br> &nbps;&nbps;why should the work cease,whilst I leave it,and come down to you ? </h3>

</header>

<ul>

<li><a href="ServiceInformation.html">Service Information</a?</li>

<li><a href="aboutUs.html">About Us</a></li>

<li><a href="contactUs.html">Contact Us</a></li>

</ul>

</nav>

<h3>Welcome toTrinity Temple Church of God in Christ! </h3></br>

testing tolaslksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdf</br>

testing tolaslksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdflksdf</br>

</section>

</aside>

2900 Josephine St.</br>

Denver,CO 80207

</footer>

</div>

</body>

</html>

Here is the javascript code in the external file...

window.addEventListener("load",todaysDate,false);

function todaysDate(){

var currentTime.getMonth()+1

var day=current Time.getDate();

var year=currentTime.getFullyear();

var completeDate=document.geatElementById("footerSection");

footerSection.innerHtml="Today's Date:"+completeDate;

alert(month + "/" +day+ "/" +year);

}

window.adEventListener("load",todaysDate,false);

Navigate

Requirements Create a program that interviews the users about their personal inf

Requirements Design and implement an application with a graphical user interface

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Requirements Create an HTML document contact.html which links an external styles

Question

Explanation / Answer

Related Questions

Navigate