OBJECTIVE
The purpose of this project is to demonstrate your understanding of the following course outcomes:
1. Gather and analyze requirements to design and plan a website.
2. Produce professional websites that adhere to appropriate/established standards, including usability, accessibility, and validation.
3. Select and apply the necessary tools, protocols, and resources to support web technologies.
4. Select comply with legal precedent and ethical standards when constructing websites.
PROJECT DESCRIPTION
Based on your great work at Creative Genius Web Design, your supervisor has assigned you to a new project to create a simple system to purchase tickets for an upcoming DMWT alumni event. Many interactive web sites use JavaScript to enable dynamic content and enhance a user’s experience using the web site.
Below are some screenshot images of what your event registration system should look like when completed. These are screenshots -The images are not clickable.
Figure 1: Event Registration Web page
|
|---|
|
This is ascreenshot -The image is not clickable |
Figure 2:Error When Putting Invalid Number of Tickets
|
|
This is ascreenshot -The image is not clickable |
Figure 3:Submission Alert When Clicking "Purchase Tickets"
|
|
This is ascreenshot -The image is not clickable |
Figure 4:Alert When Timer Has Expired
|
|
This is ascreenshot -The image is not clickable |
PROJECT COMPONENTS
A complete event registration system must feature the following components on the HTML web page:
1. A countdown timer giving the user 10 minutes to complete the transaction, including the number of tickets they wish to purchase, their name, and their email address.
2. Ability to purchase between 1 and 3 tickets.
3. A calculation showing the user the total cost to purchase the tickets.
4. Interactive design features that provide descriptive error messages and visual cues when the user has entered incomplete or incorrect information.
PROJECT FUNCTIONALITY
A complete event registration system must provide the following functionality:
1. JavaScript code outside of any functions (Don’t put this functionality within a JavaScript function:
(a)Create a countdown timer that will run for 10 minutes from the current time, displaying only the number of minutes and seconds left. When displaying a number of seconds less than 10, make sure you prepend a “0” so that the time is formatted properly (Hint: Use an if statement).
(b) As each second elapses, update the time remaining the user sees on the screen.
(c) Once the timer runs out, clear the timer so that it stops running, display an alert to the user that their timer has expired, and redirect the user back to the same page (Hint: Use location.href to help with this).
2. JavaScript functions (Most likely two or three functions) for the following items:
Item #1: Calculate Total
(a)Calculate the total (using a fixed-format with a $ and two decimal places) based on a number of tickets purchased.
(b) Perform validation to make sure the user has entered in a value that is a number for the number of tickets and the number is between 1 and 3 (Hint: Use the isNaN() function to determine if user entry is not a number).
(c) Add an error message next to the input field when an invalid number of tickets has been entered and change the background color of the input field to help alert the user.
(d) Display the ability to see the contact Information section of the webpage when a valid number of tickets has been entered. Hide the contact Information section of the webpage when a valid number of tickets has not been entered.
Item #2: Complete Purchase
(a) Perform validation to make sure the user entered in a value for both name and email.
(b) Add an error message next to the input field when either a name or email has not been entered and change the background color of the input field to help alert the user.
(c) If no errors in the input were found, provide an alert to the user thanking them for their purchase with the total amount of the purchase, and stop the timer. Otherwise, allow the user to continue to make changes until they have provided valid information.
Extra Hint:
You will be changing the background color for a number of different fields, depending on if an error has occurred or not. Consider making a function that allows you to pass in a field id and whether or not an error occurred to know what color to change the background color to. By doing this, the function can be called repeatedly instead of having to continuously re-write the code needed to do this in your solution.
PROJECT REQUIREMENTS
The zipped file attached to this assignment provides the folder structure that is required for this project. Instructions for how to unzip the file on a PC or a Mac can be found athttp://www.wikihow.com/Extract-Files.Individual files have also been provided.
Do not make any modifications to the HTML or CSS files provided. You only need to modify the event_registration.js file. Points will be deducted for modifying the HTML or CSS files.
Use // to document your JavaScript code by providing comments that explain the purpose of all lines of code you write.