Lab 1 Concert Ticket Calculator Purpose To assess your ability to apply the knowledge and skills developed in weeks 1 through 3. Emphasis will be placed on the following learning outcomes: 1. Create and display simple syntactically correct HTML documents. 2. Describe the execution a JavaScript program in a web browser. 3. Write and call functions that utilize parameters and return values. 4. Declare, define, and use variables in a script. 5. Correctly use the JavaScript "if" and nested "if-else if" statements. Assignment Your local school is going to host a concert. They need a web page for the school staffs to determine the concert ticket costs. You are tasked to design and build the concert ticket calculator for the school. There are four type of tickets. They are front row, middle row, rear row and balcony. The ticket costs are. Front row: Middle row: Rear row: Balcony: $12.50 per ticket $10 per ticket $7.50 per ticket $14.50 per ticket Presume all seats are purchased at once and are in the same seating location. Regardless of location, if 6 or more tickets are purchased, 12% will be deducted from the final total. Students get additional 15% discount. For example, for 8 tickets without student discount, the web page should output: Front row seats for 8 tickets will cost $88.00 Middle row seats for 8 tickets will cost $70.40 Rear row seats for 8 tickets will cost $52.80 Balcony seats for 8 tickets will cost $102.08 For 8 tickets with student discount, the web page should output: Front row seats for 8 tickets will cost $74.80 Middle row seats for 8 tickets will cost $59.84 Rear row seats for 8 tickets will cost $44.88 Balcony seats for 8 tickets will cost $86.77 12.50 x 8 = 100. 12% discount for 6 or more tickets, the total ticket cost is $88.00. And for student 15% discount, the total ticket cost is $74.80. Verify the calculation.
Action Items/Programming Requirements The solution must use and deliver both an HTML and a JS file. The JS file must be referenced in the <head> tag of the HTML document using the <script> tag to load your function so it can be called later on. The solution should use a <script> in the <body> of the HTML to call the main weather function. All JS files must contain the strict directive at the top. This directive allows the debugger to flag undeclared variables. "use strict"; All variables must be declared. The prompt() function must be used to gather information from the user just as was done in the example screen shots. Do not use <input> tags or hard coded input values. If function has parameters, the function parameters must be utilized. No global variables are allowed. Function Requirements You should have these functions. o A ticket calculation condition function: This function three parameters: Seating location such as Front, Middle, Rear, or Balcony Number of tickets Is student Boolean The function must be in a JS file. All functions should always be in JS files and multiple separate functions can be in the same JS file. The function is responsible for calculating and returning the total ticket cost for the requested number of tickets for the given seat location with or without student discount. Your function should be reusable. If done correctly, the parameters provide everything needed to calculate the ticket cost. Call the function four times to get the information you need for all output. The code inside the function may NOT prompt the user nor write to the web page. The function parameters are sufficient to allow the function code to calculate the costs and return the answer. The JavaScript that calls the function should handle prompting and output to the web page. The calling code should output four HTML bullet points displaying the total cost of the requested number of tickets for seating at ALL four seating locations. o An utility isstudent function: Return true if user answers "Y" or "y" to student discount question. False otherwise. See the sample output screen shots. o (Optional) A main function: Having a main function help organize the overall flow of the program. This function prompts for user inputs and call the ticket cost calculation function and displays the results. Put the HTML and JS files in the same folder. Try to make your solution look similar to the screen shots. Put identifying information in your files: your name, assignment name/number term/class.
Example for HTML: <!-- YourName Lab 1 2017-SU-ITEC136 --> Example for JS: /** * @author YourName * Lab 1-2017-SU-ITEC 136 */ Review code against the documentation and style requirements Word document available on the course web site for the assignment. You will find that both documentation and style requirements are facilitated by the Aptana Integrated Development Environment (IDE).
Screen Shots (FireFox): With student discount:
Screen Shots (FireFox): Without student discount:
Helpful Hints The following hints may help you to solve the problem: The JavaScript file must have "use strict"; directive. Use the prompt() function to input data. For example: var favcolor = prompt("what is your favorite color?", "yellow ); The first parameter is shown to the user and the second parameter is the optional default response. Recall that prompt() returns a string value. Use the parsefloat() function to convert a string into a floating point number. After the JavaScript below, receipttotal will hold a floating point value with decimal precision, ready to be used in math operations. Likewise, num variable can have decimal value. var numberasstring = "6.023"; var receipttotal = parsefloat(numberasstring); var num = parsefloat(prompt("what is 5 / 2?")); Use the parseint() function to convert a string into an integer number. After the JavaScript below, totalpeople will hold a whole number value of 123, ready to be used in math operations. Likewise, age variable only hold integer value. var totalpeopleasstring = "123"; var totalpeople = parseint(totalpeopleasstring); var age = parseint(prompt("how old are you?")); Use the tofixed() method of any Number object (variable) to convert a number into a string with a fixed number of decimal places. For example: var mypi = 3.1415926535; document.writeln(mypi.tofixed(4)); // writes out 3.1416 Use Math.round() to round a number to the nearest integer only. var wholenum = Math.round(20.49); // Returns 20 into wholenum wholenum = Math.round(20.99); // Returns 21 into wholenum You could use the.tofixed() method of any Number object (variable) to convert a number into a string with a fixed number of decimal places. But.toFixed() is meant to convert to strings, not round number variables. Additionally, while.tofixed() may round most values, there is a problem with it on some numbers. For example, this works fine: var mypi = 3.1415926535; document.writeln(mypi.tofixed(4)); // writes out 3.1416 This does not:
var val = 1.045; var n = val.tofixed(2); document.writeln("n == " + n + "<br>"); // 1.04, WRONG! Should be 1.05 Use the following to properly display number to the 2 decimal place, var val = 1.045; val = Math.round(val * 100)/100; var n = val.tofixed(2); Better yet, write a function to return the number with two decimal places. function round(value) { return (Math.round(value * 100) / 100); } var val = 1.045; var n = round(val).tofixed(2); If a variable represents U.S. currency, we expect to see it displayed with two places of decimal precision. Even if there is only one place of decimal precision in the value. For example, a variable holds 1.5; when output to the web page it will appear as 1.5 this rather than 1.50 as preferred. Even though.tofixed() isn't a good choice for rounding, it is very good at zero padding. Use it for output of monetary values as calculated values may have only one decimal place of precision. Use document.writeln() to display output to user.
Grading Criteria Quality of the solution: 0 50 points o Documentation (internal comments) (0 5 points) It is not uncommon for industry to impose a way of documenting software that is uniform across all programmers. Documentation standards are outlined in the same document referenced in the style bullet below. o Style (formatting, naming conventions and appearance of solution code) (0 5 points) As listed in the action items of the course web page lab assignment, ensure that your solution code meets the documentation and style guidelines for this course. The documentation and style requirements Word document titled "DocumentationAndStyleGuidelines.doc exists in the Resources folder on your course CD and as a link on the lab assignment page web page. Review your code against this document. I am looking for consistency also. For example, if you prefer to put your curly braces on the same line as the if statement rather than the next line, that is fine provided you are consistent throughout your code. o Correctness (how the program works under test) (0 40 points) The program should work, and be seen to work. The code should be robust. Note that grammar, spelling, and writing mechanics do not contribute to the total points for this assignment; however, improper grammar, poor spelling, or poor writing mechanics may result in significant point deductions.