Answered step by step
Verified Expert Solution
Question
1 Approved Answer
I need help with the javaScript for this problem You will implement a client-side script to process a form and display calculated information on a
I need help with the javaScript for this problem
You will implement a client-side script to process a form and display calculated information on a webpage. The Starter Project The starter project focuses on a new page called pricing from a version of the Pacific Trails Resort case study. The pricing page is supposed to give the site visitor a quote for activities at Pacific Trails Resort. You will only work on the behavior of the pricing page. The pricing page consist of a form with one element of type number, three elements of type checkbox, and the "Calculate Cost" button, which is implemented by a div> element: Pricing Number of activities: Premium: Elite: Deluxe: If you open the file pricing.html in VS Code, you will find several div > elements with class display-none that are not displayed on the page because their class display-none is styled to set the CSS property display to none. - The first div > element of class display-none wraps an entire table. The table should be used to display the quote for activities at Pacific Trails Resort for the submitted form input. You will implement the behavior that determines the value for the table columns and that displays the table upon form submission. If you submit the form in the starter project, nothing happens. - The other element of class display-none is located in the form and represent an error message for the input field. If an invalid value is entered in the form, the corresponding error message should be displayed. You will implement the validation and display of the error message in case of invalid input. Instructions You will add all your code to the JavaScript file js/pricing.js. Do not make any changes to the stylesheet or to the HTML files. 1 CS6251 Web Technologies I Final Exam Part 1: Validation of number activities ( 30 points) 1. Define a function that checks whether the input field for the number of activities contains a positive value (i.e., a value greater than 0). Notice that only when an invalid value is entered, the error message should be displayed: t 2: Calculate and display cost (40 points) 1. Implement a function that calculates and displays the cost for the entered user input as follows. Check if the input for the number of activities is valid. If it is, calculate the price for the activities: i. Each activity is priced based on the tier. There are four tiers: basic, premium, elite, and deluxe. If none of the checkboxes is checked in the form, you will user the basic price for the activity. The basic price of an activity at the Pacific Trails Resort is $100. Additional fees are incurred per activity, based on the tier: ii. The taxes, which are 15\%, are applied to the final price (after the tier option has been included). Pricing Number of activities: 2. Make sure the displayed values use the dollar sign and have exactly two decimals. Notice that the tier fees contain extra text to help the user understand where the fees are coming from: the number of activities multiplied by the additional cost added by the tier. Clean Code Requirements ( 20 points) - If your functions are getting too large, refactor them by writing one or more helper functions. - Make sure your code is indented. - Variable and function names must follow the proper naming conventions. - Document your code appropriately. Submission - Rename the folder final_yourname and archive it into a . zip file. - Upload to Moodle. Additional Examples: Additional ExamplesStep by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started