Monday, October 5, 2015

Program 3: Javascript

Here is your third coding assignment, due on October 23, by the end of the day.

You will be adding several Javascript functions to the form you have been working on in the last two assignments. You may also choose to use JQuery where appropriate. Add the following functions to the form fields below:
  • Temporary Category Field: Mouse over dialogue that says "See instructions at"
  • Address Field: Use the Google Maps API to implement a autocomplete function for the address field
  • Email Address Field: Validate that the entry is a correctly formatted email address
  • Date Fields: Implement a Javascript/JQuery date picker for the two date fields

While working towards this goal, please:
  • Do not significantly modify your content or styling
  • You may improve your markup, especially as needed to meet the requirements for the Javascript you are implementing
  • You may use Javascript or JQuery code you find online, but you must list your sources in your written report

Test your page on various browsers ("crossbrowser testing") using BrowserlingBrowseraBrowserStack or SauceLabs — or any equivalent tool. These tools make it easy to see how a page is rendered in different browsers without actually running those browsers. Test at least half of the following browsers:
  • Firefox for Windows
  • Firefox for OS X
  • Chrome for Windows
  • Chrome for OS X
  • Chrome for Android
  • Internet Explorer for Windows
  • Safari for OS X
  • Safari for iOS

Marks will be assigned as follows:

  • 10% Good turnin
  • 15% Good style, including avoiding excessive mixing of js into html and css
  • 25% Do cross browser testing and validation, report same 
  • 50% Correct implementation, including:
    • 10% category field
    • 15% address autocomplete
    • 10% email format validation
    • 15% date pickers

Using wolfware classic assignment "js_assignment", submit:
  • one CSS file
  • one matching HTML file
  • your Javascript/JQuery source files
  • a text file of at most 1-2 pages documenting your test results and any references/code sources you used.

No comments:

Post a Comment