Home » To create a simple system to purchase tickets for an upcoming dmwt

To create a simple system to purchase tickets for an upcoming dmwt


http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifProject 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

project 1 image 1

This is a screenshot – The image is not clickable


Figure 2: Error When Putting Invalid Number of Tic


This is a screenshot – The image is not clickable


Figure 3: Submission Alert When Clicking “Purchase Tickets” 

project 3 figure 3

This is a screenshot – The image is not clickable


Figure 4: Alert When Timer Has Expired

project 3 figure 4

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

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifProject 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.

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifProject 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 at http://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

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifSubmission 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)

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifProject 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.  

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifHTML Validation
Your pages should validate without errors using the W3C HTML Markup Validation Service at

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

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifHelpful 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
  2. Targeting IDs
  3. Targeting and Altering HTML
  4. Setting Style Properties for HTML Elements
  5. Getting and Passing Attributes
  6. Working with Numbers in JavaScript
  7. Creating a Countdown Timer
  8. Date Reference
  9. JavaScript Window Location
  10. JavaScript NaN (Not a Number) Property

http://polaris.umuc.edu/~djohnso2/ifsm/b2.gifSubmitting 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).


Calculate the price of your order

550 words
We'll send you the first draft for approval by September 11, 2018 at 10:52 AM
Total price:
The price is based on these factors:
Academic level
Number of pages
Basic features
  • Free title page and bibliography
  • Unlimited revisions
  • Plagiarism-free guarantee
  • Money-back guarantee
  • 24/7 support
On-demand options
  • Writer’s samples
  • Part-by-part delivery
  • Overnight delivery
  • Copies of used sources
  • Expert Proofreading
Paper format
  • 275 words per page
  • 12 pt Arial/Times New Roman
  • Double line spacing
  • Any citation style (APA, MLA, Chicago/Turabian, Harvard)

Our guarantees

Delivering a high-quality product at a reasonable price is not enough anymore.
That’s why we have developed 5 beneficial guarantees that will make your experience with our service enjoyable, easy, and safe.

Money-back guarantee

You have to be 100% sure of the quality of your product to give a money-back guarantee. This describes us perfectly. Make sure that this guarantee is totally transparent.

Read more

Zero-plagiarism guarantee

Each paper is composed from scratch, according to your instructions. It is then checked by our plagiarism-detection software. There is no gap where plagiarism could squeeze in.

Read more

Free-revision policy

Thanks to our free revisions, there is no way for you to be unsatisfied. We will work on your paper until you are completely happy with the result.

Read more

Privacy policy

Your email is safe, as we store it according to international data protection rules. Your bank details are secure, as we use only reliable payment systems.

Read more

Fair-cooperation guarantee

By sending us your money, you buy the service we provide. Check out our terms and conditions if you prefer business talks to be laid out in official language.

Read more