Answered step by step
Verified Expert Solution
Link Copied!

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 problemimage text in transcribedimage text in transcribedimage text in transcribedimage text in transcribedimage text in transcribedimage text in transcribedimage text in transcribed

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 Examples

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Application Development And Design

Authors: Michael V. Mannino

1st Edition

0072463678, 978-0072463675

Students also viewed these Databases questions