TICKET PURCHASING



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 a screenshot - The image is not clickable

 

Figure 2: Error When Putting Invalid Number of Tickets

This is a screenshot - The image is not clickable

 

Figure 3: Submission Alert When Clicking "Purchase Tickets"

This is a screenshot - The image is not clickable

 

Figure 4: Alert When Timer Has Expired

This is a screenshot - 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 sections 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 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 contactInformation section of the webpage when a valid number of tickets has been entered. Hide the contactInformation 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

Submission Requirements

Please complete the following to you Assignments Folder:

1. Host your working event registration system online using the Nova Server
2. Submit the HTML and JavaScript files you used to create the webpage to your project Assignments Folder
3. Write a Project Reflection (see description below)

Project Reflection

Answer the following questions when you submit your assignments files. Each question’s response must have a minimum content length of 50 words.

1. What resources did you use to determine what type of JavaScript was needed? Include all of the specific URLs you used and what you found at each URL
2. What process did you use to create your event_registration.js file? Describe what you did to create the code you submitted in the assignment. Be specific!
3. What issues or challenges did you face completing this project? If you feel you did not face any issues or challenges in completing this project, what issues or challenges do you think someone new to JavaScript might face in completing this project?
4. Describe another scenario that could use what you learned in completing this project. Be specific!
5. If you could waive a magic wand and change something about this project, what would you change and why? If you do not believe anything should be changed, explain why you think this is the case.

Please submit your Project Reflection as a Microsoft Word document or just copy and paste your answers in your Assignments Folder's text box when you submit your assignment along with the rest of the required project files.   



HTML Validation

Your pages should validate without errors using the W3C HTML Markup Validation Service at http://validator.w3.org.

How to do this:

1. Publish your pages to Nova
2. Go to the W3C validator and paste in the URL to your index.html page
3. Select the check button

Helpful Resources

This assignment will require you to combine what you have learned interacting with the DOM and performing form validation for success. The links below highlight specific concepts and topics that you will need to learn in order to complete this assignment successfully.

1. Types of Mouse Events
   
   https://www.w3schools.com/jsref/dom_obj_event.asp
2. Targeting IDs
   
   https://www.w3schools.com/jsref/met_document_getelementbyid.asp
3. Targeting and Altering HTML
   
   https://www.w3schools.com/jsref/prop_html_innerhtml.asp
4. Setting Style Properties for HTML Elements
   
   https://www.w3schools.com/jsref/dom_obj_style.asp
5. Getting and Passing Attributes
   
   https://www.w3schools.com/jsref/met_element_getattribute.asp
6. Working with Numbers in JavaScript
   
   https://www.w3schools.com/jsref/jsref_obj_number.asp  
7. Creating a Countdown Timer
   
   https://www.w3schools.com/howto/howto_js_countdown.asp
8. Date Reference
   
   https://www.w3schools.com/jsref/jsref_obj_date.asp
9. JavaScript Window Location
   
   https://www.w3schools.com/js/js_window_location.asp
10. JavaScript NaN (Not a Number) Property
    
    https://www.w3schools.com/jsref/jsref_number_nan.asp

Submitting Your Assignment

To complete this project and receive full credit, you must submit your completed presentation to your Assignments Folder unless you encounter problems--discussed above).

Attachments:

• 1493802048-ticket_purchasing.docx