The next few homework assignments will result in a small invitation system. The first step is very modest; you will create a single web page with HTML and JS with no backend. (A prototype backend will be handed out later.)

As before, you can work with a partner or alone. It will be simpler if you stay with the same partner through the next few assignments, but this will not be required. That is, you will be able to change or drop partners.

For this week, create an HTML page that has one input screen. Your screen must have a title and instructions. It will have four text fields where a user can enter an event name, date, time, and location. The screen will then have a text box (multiple lines) where the user can provide a description of an event. The screen will have a submit button. You may have two mutually exclusive buttons for other users to confirm "attend" or "not attend" for future implementation.

Note these buttons will not work in this assignment, we will get to the backend later.

The web page must include JavaScript to perform at least three actions. One must check that all the input text fields and box are filled out. This JS function must run when the submit button is pressed. You can decide what the other two JS actions should be; get creative. Feel free to add additional elements you feel should be included and have fun!

To make the form handling simple, you can use a prototype "general form handler" servlet borrowed from Dr. Offutt's examples. Your HTML will send all data to this program, and it echoes the inputs to the user. See the Information Form example. It includes the HTML form tag:
<form method="post" action="http://cs.gmu.edu:8080/offutt/servlet/formHandler">
Copy this verbatim into your HTML. When the user presses a submit button, all data submitted will be echoed to the user's screen, just as in the example.

Submission

Put your name and "SWE 432 - Assignment 6" on all screens. If you work with a partner, put both names on the screens. Submit your page by

• Placing a link to it on your website. Your file should have the name yourname-invitesystem.html. Partners' websites should both link to the same web page.
• Posting all your source files on Blackboard.

Making your web page available to me is your responsibility; if I cannot access your file then you will not get credit. Be sure to test access to your file before the due date.

Grading Rubric

The grading for this assignment will be as follows:
[Total: 20 points]

• (7 points) — Satisfaction of the requirements of the form (1 point for each form element)
  
  • Title and instructions
  • Event name
  • Event date
  • Event time
  • Event location
  • Event description
  • Submit button
  Note: You may have two buttons for confirmation ("attend" and "not attend") for future implementation.
• (2 points) — Verifying that all the input text fields and box are filled out before submit
• (2 points) — Correct implementation of the remaining other JavaScript features
• (5 points) — Adherence to all usability concepts as discussed in class
• (2 points) — Adherence to directions and submission instructions
• (2 points) — HTML and JavaScript readability, style, and maintainability

© Based on documents by Dr. Jeff Offutt (the original author) and Dr. Kinga Dobolyi, use with permission of the author. This document is made available for use by GMU students of SWE 432. Copying, distribution or other use of this document without express permission of the author is forbidden. You may create links to pages in this web site, but may not copy all or part of the text without permission of the original author.