1. Project 1 - Individual Student Project
1 Diagram to show functionality (Session 3 and Chptr 7)
3 HTML5 Pages (minimum) – Your main page will be the User Entry Form
1 .CSS Page (minimum – to keep style organized)
1 .JS Page (to keep code organized)
Use (all at least once): If
If…else
1 Message Box
HTML5 Slider
HTML5 Validation on all form entries
Counter
Any math operation
Posted to FTP site for *functional* demonstration
Submit Diagram and Matrix (next slide) for documentation
Function errors and lack of functionality will be costly to your grade!

2. Requirements Matrix to Complete
You will need to complete the requirements matrix below for submission with your diagram.
Required Element
How Used in Project
3 HTML5 Pages
Mail HTML/Romney/Mitt
CSS Page
3 CSS pages for all 3 HTML pages
JS Page
1 JS page for the if/else fxn.
3 IF
Selecting candidates fxn uses (if)
If…Else
“ “ also used if..else
Message Box
Displays name of matching candidate
HTML5 Slider
Age slider
HTML5 Validation on all entries
3 Errors, but all seems ok?
Counter
Countdown till election day
Any Math Operation
Greater then/less then

3. Sample Diagram MailHTML .html Obama.html Mitt.html Selects Elements
Here is a general example of what you are try to accomplish.
You are using a series of user inputs to determine an outcome…in this case who would the user’s candidate.
Session 3 introduces the symbology shown here (diamond indicate a decision such as if, else if, etc…).
MailHTML
.html
Selects Elements
Changes Nothing
Changes inputs where as they Pick issues relevant to the candidate
Left Leaning selections
Right leaning selections
Obama.html
Mitt.html