CS 1100: Web Development: Client-Side Coding

Final Exam

The Task: Replicate an HTML Form

Your task is to create a facsimile of the login form in the image below.
The following pages contain instructions and hints for the HTML, CSS, and JavaScript you need to write.

Download the starter code to use as the base for your solution.

During the exam, you may use only VS Code and a web browser, to access only the three exam files and MDN documentation.

At the end of the exam, submit your code using the link to the course submission system on the course homepage.


the Zap2it login screen

HTML

Write HTML to create the elements of the form. (48 points)

  1. Everything within the border is part of a form element. The form posts its data to "https://tvlistings.zap2it.com/".
  2. The "Log In" element in the upper left corner is paragraph text.
  3. The "X" element in the upper right corner is paragraph text.
  4. The remaining elements of the form are in a div so that they can be styled as a unit.
  5. The "Connect with Facebook" and "Connect with Google" elements are buttons of type button (that is, they do not submit the form.) The text on each button includes the logo icon for the corresponding company.
  6. The dividing line is an hr element.

    Note: You do not have to display the or text on top of the line. That is an extra credit task.

  7. The "Email", "Password", and "Log In" elements are input elements. The first two are text boxes of the corresponding type, and the third is a submit button.
  8. The two elements below the "Log In" element are paragraph text with links. Both hrefs link to "#". (JavaScript will control the anchors' behavior.)

CSS

Write CSS to style the form so that it resembles the image above. (48 points)

You do not have to follow the hints below, but they may help you create a form that resembles the original more closely without as much trial and error. The list is not a complete specification, though (especially with regard to margins and padding), so you will want to include other properties in your styling. Note: An initial CSS rule for the hr element is given in the starter code.

  1. The form is 600 pixels wide with sans-serif text, a thin black border, and appropriate margins and padding.
  2. All paragraph text in the form is bold.
  3. The "X" element is dark gray and floats to the right of the form.
  4. The remaining elements of the form are centered using the text-align property.
  5. The "Connect with Facebook" and "Connect with Google" buttons are 400 pixels wide and 35 pixels tall, with 12-pixel bold font. The Facebook button is blue with white text, and the Google button is white with gray text.

    Note: You do not have to create the reverse video effect of the Facebook icon. That is an extra credit task.

  6. The "Email" and "Password" elements are 400 pixels wide and 35 pixels tall, with solid gray borders and 16-pixel font. Notice the padding to the left of the placeholder.
  7. The "Log In" element is green with bold white text. It needs to be a bit wider than the other elements in order to appear the same width.
  8. The two paragraphs below the "Log In" element have smaller text than the other paragraphs in the form. The links are the same color as the "Log In" button.

JavaScript

Write JavaScript to implement these behaviors that go beyond how the form submits its data. (9 points)

  1. When users click on the "Connect with Facebook" button, the program writes 'connecting with Facebook...' to the console.
  2. When users click on the "Connect with Google" button, the program writes 'connecting with Google...' to the console.
  3. When users click on the "X" in upper right corner of the form, the tab is closed using the statement window.close();.

Extra Credit

Do not attempt these problems unless you have done all you can on the three main areas of the exam. They are challenging and may require a fair amount of trial and error.

That Is All

Congratulations on a semester well done. I hope you found the course useful. Best wishes for a relaxing and enjoyable break!