Lab 1

The goal of this lab is to review the basics of creating an html document, writing some basic css and javascript in order to validate a 'static' form. For this lab, you will create a 'Coffee Shop Order Form' that will include the following inputs and types:
- 2 text inputs for the first and last name
- 3 or more drink items for the menu. Each item will have a checkbox, in addition to a select with four options: 'Select Size, Tall, Grande, Venti'.
- Two radios labeled 'In House', and 'To Go'.
- A submit button to submit the form.

Use internal CSS to style the form however you want. You may include images as well for background, items, etc.

Use javascript 'onsubmit' event to validate the form, calling your validation function. Validation:
- If either first or last name input fields are empty, change the border color of the input to red, and set a boolean 'err' var to true.
- If no item has been checked, alert the user that at least one item must be checked and set boolean 'err' var to true.
- If an item has been checked, however the select's option value is default 'Select Size', change the border color of the select to red, set boolean 'err' var to true.
- If the radio for 'In House' or 'To Go' is unchecked, make visible a red asterisk for the radios, set boolean 'err' to true.
- If boolean 'err' is true, deny the form's action request by returning false.
- Otherwise, clear the document body, and write to the body the order. For example: "Thank you fname lname for your order. You have ordered item1 tall, item2 venti, and item3 grande To Go", or something similar.
- If a form had previously been validated with errors, and some errors were corrected but still containing some errors, return the corrected element(s) to its default state (removing red borders, astericks, etc).

This is basic form validation via client side with javascript. In later weeks, we will focus our attention of how to validate and process data via server side with PHP.

Extra Credit Challenge (1pt): convert the form to a 'dynamic' form by adding a 'quantity' for an item that is checked, in which you can individually select a size for the items (hint: addEventListener, onchange).

Once completed, in your public_html, upload and clearly label your file similar to lab1cs3680S19.html. I need to be able to clearly identify your lab submission. Once submitted, do not touch the file after the lab's submission due date, as I use the timestamp to verify the lab has been turned in on time. Later in the semester, you will have to upload file(s) to your depository directory. You might want to copy and backup a lab assignment such that future labs might use code from previous labs, that way submitted labs remain untouched.