to create a simple system to purchase tickets for an upcoming DMWT alumni event using JavaScript

profilepatterson
tickets_purchasing.zip

Tickets purchasing/event_registration.html

We are delighted to welcome back our alumni for an evening of networking and fun. Event tickets are only $5.00 per person, not including a ticket processing fee of $0.50, and include light appetizers. To register for the event, fill out the form below. All fields with * are required

Act fast! This transaction must be completed in 10:00 minutes

Digital Media and Web Technology (DMWT) Alumni Event Registration How many tickets would you like to purchase? You can purchase up to 3 tickets. * Your total cost will be: Name * E-Mail Address *

Tickets purchasing/event_registration.js

/* Your Name: <Enter Your Name> Last Modified Date: <Enter The Date in mm/dd/yyyy format> File: event_registration.js File Description: <Enter a brief paragraph to describe the purpose of this file> */ // Set the minimum and maximum number of tickets able to be purchased var minTickets = 1; var maxTickets = 3; // Set variables for the ticket cost var costPerTicket = 5.00; var ticketSurcharge = 0.50; /*** YOUR CODE STARTS BELOW HERE ***/

Tickets purchasing/follow the Rubrics.docx

Reminder of issue to be taken care of

Need of showing any input fields.

Need to validate input fields or external or embedded JavaScript.

Error Handling in fields to enter information.

Image.js file properly linked to HTML

Show as required:-

- Working function or mouse events

- Large image area, if so stated

- Captions

Rubric Name: Project 3 (Ticket Purchasing) Rubric

 

 

 

 

 

 

Criteria

Excellent 25 points

Very Good 20 points

Good 15 points

Needs Work 10 points

No Submission 0 points

Countdown timer

Countdown timer meets the following four criteria with JavaScript code outside of any functions without modifying the HTML or CSS files:

· Timer is set to run for 10 minutes, displaying only the number of minutes and seconds left as shown in the sample solution with a pre-pended "0" if needed

· Timer is updated as each second elapses

· Timer is cleared so that it stops running when time has run out

· Alert is displayed when timer runs out and user is redirected back to the same page

Countdown timer meets three of the following four criteria with JavaScript code outside of any functions without modifying the HTML or CSS files:

· Timer is set to run for 10 minutes, displaying only the number of minutes and seconds left as shown in the sample solution with a pre-pended "0" if needed

· Timer is updated as each second elapses

· Timer is cleared so that it stops running when time has run out

· Alert is displayed when timer runs out and user is redirected back to the same page

Countdown timer meets two of the following four criteria with JavaScript code outside of any functions without modifying the HTML or CSS files:

· Timer is set to run for 10 minutes, displaying only the number of minutes and seconds left as shown in the sample solution with a pre-pended "0" if needed

· Timer is updated as each second elapses

· Timer is cleared so that it stops running when time has run out

· Alert is displayed when timer runs out and user is redirected back to the same page

Countdown timer meets one of the following four criteria with JavaScript code outside of any functions without modifying the HTML or CSS files:

· Timer is set to run for 10 minutes, displaying only the number of minutes and seconds left as shown in the sample solution with a pre-pended "0" if needed

· Timer is updated as each second elapses

· Timer is cleared so that it stops running when time has run out

· Alert is displayed when timer runs out and user is redirected back to the same page

Countdown timer was not attempted

Calculate Total

Calculate total meets the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Total is correctly calculated with a fixed-format with a $ and two decimal places

· Validation for number of tickets is correct and complete

· Error message next to the input field is displayed and background color of field changes when invalid number of tickets is entered

· contactInformation section of the webpage is shown/hidden depending on whether or not a valid number of tickets has been entered

Calculate total meets three of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Total is correctly calculated with a fixed-format with a $ and two decimal places

· Validation for number of tickets is correct and complete

· Error message next to the input field is displayed and background color of field changes when invalid number of tickets is entered

· contactInformation section of the webpage is shown/hidden depending on whether or not a valid number of tickets has been entered

Calculate total meets two of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Total is correctly calculated with a fixed-format with a $ and two decimal places

· Validation for number of tickets is correct and complete

· Error message next to the input field is displayed and background color of field changes when invalid number of tickets is entered

· contactInformation section of the webpage is shown/hidden depending on whether or not a valid number of tickets has been entered

Calculate total meets one of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Total is correctly calculated with a fixed-format with a $ and two decimal places

· Validation for number of tickets is correct and complete

· Error message next to the input field is displayed and background color of field changes when invalid number of tickets is entered

· contactInformation section of the webpage is shown/hidden depending on whether or not a valid number of tickets has been entered

Calculate total was not attempted

Complete Purchase

Complete purchase meets the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Validation is created to ensure a valid name has been entered (anything other than a blank)

· Validation is created to ensure a valid email address has been entered (in the format [email protected])

· An error message is displayed next to the corresponding input field and the background color of the input field is changed when an invalid name or email is provided

· Thank you alert with total purchase amount is displayed and the timer is stopped when all valid information is displayed

Complete purchase meets three of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Validation is created to ensure a valid name has been entered (anything other than a blank)

· Validation is created to ensure a valid email address has been entered (in the format  [email protected])

· An error message is displayed next to the corresponding input field and the background color of the input field is changed when an invalid name or email is provided

· Thank you alert with total purchase amount is displayed and the timer is stopped when all valid information is displayed

Complete purchase meets two of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Validation is created to ensure a valid name has been entered (anything other than a blank)

· Validation is created to ensure a valid email address has been entered (in the format  [email protected])

· An error message is displayed next to the corresponding input field and the background color of the input field is changed when an invalid name or email is provided

· Thank you alert with total purchase amount is displayed and the timer is stopped when all valid information is displayed

Complete purchase meets one of the following four criteria using JavaScript functions without modifying the HTML or CSS files:

· Validation is created to ensure a valid name has been entered (anything other than a blank)

· Validation is created to ensure a valid email address has been entered (in the format  [email protected])

· An error message is displayed next to the corresponding input field and the background color of the input field is changed when an invalid name or email is provided

· Thank you alert with total purchase amount is displayed and the timer is stopped when all valid information is displayed

Complete purchase was not attempted

Project Reflection

Answered all five questions with accurate, complete information and met the minimum word requirement for each question answered.

Answered four questions with accurate, complete information and met the minimum word requirement for each question answered.

Answered three questions with accurate, complete information and met the minimum word requirement for each question answered.

Answered one or two questions with accurate, complete information and met the minimum word requirement for each question answered.

No project reflection completed.

Overall Score

Excellent 90 or more

Very Good 80 or more

Good 70 or more

Needs Work 60 or more

No Submission 0 or more

Submit Files

Hello Please tell me how to sent other files like style.css, event-registration.js, event-registration.html, and Ticket Purchasing.doxc (as the clear copied assignment).

 

image1.wmf

Tickets purchasing/logo.png

Tickets purchasing/style.css

body { margin-left: 2%; margin-right: 30%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; background-color: #ffffff; } legend { font-weight: bold; font-size: 10pt; color: maroon; font-style: normal; font-family: Verdana, Arial, Helvetica, sans-serif } label { font-weight: bold; display:block; margin-top:20px; } input { background:#efefef; border:1px solid #dedede; padding:3px; margin-top:5px; font-size:0.9em; color:#3a3a3a; } #contact input { width:300px; } #contact input.small { width:100px; } section p#tagline { font-size: 16px; } section p#transactionTimer { color: #ff0000; font-size: 16px; font-weight: bold; } input#submit, input#reset, input#clear { width: 130px; border: none; cursor: pointer; font-weight: bold; } input#submit { background-color: darkblue; color: white; } span.error, span.required { font-weight: bold; color: red; } div#contactInformation { display: none; } div.actionButtons { display: block; margin-top: 20px; }

Tickets purchasing/Ticket Purchasing.docx

Project 3: Ticket Purchasing

Instructions

 

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

project 1 image 1

This is a screenshot - The image is not clickable

 

Figure 2: Error When Putting Invalid Number of Tickets

project 2 figure 2

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

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

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

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

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

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

image1.gif

image2.jpeg

image3.jpeg

image4.jpeg

image5.jpeg