This assignment practices using the DOM, forms, radio buttons, and regex for validation. You can look at the Form Validation assignment previously as a good starting point, and the interactive quizzes as well. When complete, there should be one HTML file, one CSS file, and one JavaScript file.

To practice some validation and using regex, there is a form on the page with input fields for a name, password, and cost of a meal. There are 4 radio buttons about the quality of the service. When the user successfully fills out the form, the JavaScript will calculate the amount of the tip and the total cost (tip plus meal cost), and display the results in good currency format (more about that later).

When the app launches, the screen looks like this:

As with the form validation project, the fields for name and password will have live feedback as the user types, and will display messages about errors to the right of the locations with errors. The green backgrounds in those fields means the data is valid. The meal cost will also have validation, that the the data is numbers and is greater than zero.

The background of the body is a light gray, color code #eee. The form has a max width of 600px and auto margins, so it centers on the page. Its background is white, with padding of 10px. The h1 needs a top margin of 0px. The input fields need margin of 10px and padding of 4px. As with the Form Validation project, the class for "success" has a light green background and border, and the class for "error" has a crimson border and pink background. These attributes are added to the input fields during live validation. The feedback div has font size of x-large and text alignment of center.

JavaScript:

Create handles for the form to access all the necessary locations. Create regex patterns:

• the user name: at least 4 characters which can be uppercase, lowercase letters, and a space
• the password: 12 characters which can be numbers, uppercase letters, and lowercase letters
• the meal cost: at least 1 character, which can be numbers and a period (Note: you have to use an escape character for the period, since a period in a regex string represents a wildcard.)

Add an event listener for "submit" to the form. Inside its callback function, get all the data from the form. Refer to the Form Validation project for guidance. Because error messages will go into a label, you need to first empty out those labels. Validate the data of each of the input fields. If it doesn't validate, add text to the error label for that field that explains the problem. See the example above for that error text. After validating that the meal cost data matches the pattern, check if it is less than or equal to zero -- meal cost must be more than zero. This means there are 2 validations for the meal cost -- check if it matches the regex pattern, and check that it is greater than zero. If any of these validations fail, set a flag that says the form is invalid. After the validation code, test if that flag is true, meaning everything was valid, and if it is, then calculate the tip and total cost. If it is not true, if there were errors, then nothing else happens.

The calculations required here are simple. Divide the tip rate by 100 to convert it from a number into a percentage rate. That is, if the tip rate selected in the radio buttons is 20%, divide it by 100 to get a rate of 0.20. Multiply that rate and the meal cost to get the tip amount. Add the tip amount to the meal cost to get the total amount.

To calculate and display the results, you need to use 2 built-in functions. The first is "parseFloat()", which converts the input string data for the meal cost into a double, which is necessary for the addition operation when adding the meal cost and the tip amount to get the total amount. Remember that the plus operation, "+", is overloaded -- it has 2 possible meanings. If you add together 2 numbers, it will do math. If you add together 2 strings, it will concatenate the string. When the input field for the meal cost is pulled from the form, it is a string. If you don't convert the string version of the meal cost to a number, then the addition operator results in concatenation of strings. That is, if the tip amount is 1.25 and the meal cost is 12.50, adding those together could end up as 1.2512.50 -- joining the strings. So first convert the meal cost to an actual number, like this: mealCost = parseFloat(mealCost);

The other values could be converted to numbers with this parseFloat() function, but since they will be used in the operations of multiply and divide, there will be do doubt for the compiler that the variables are numbers. It's only the addition operation that has multiple possible interpretations.

To display the money variables as currency, you need to use the "Intl" built-in object (short for International), which understands locales for representing date, time, money, and more. Create a variable which is an object of this "Intl" object specifically for US currency like the image below. It assumes that "tip" is the tip from the input field, and "total" is the meal cost plus the tip, already added together.

The first line creates an object that understands the locale is US English, with options that the style for representing any data in this object is currency (rather than date or time, for example), and that the currency is US dollars. With those settings, it will put a dollar sign first, then add commas for separators, a decimal point, and 2 digits after the decimal point. Use it as shown in the lines that begin with "let", creating a new variable that contains the formatted version of the data variables on the project. The "moneyFormat" object has a function named "format", which needs a parameter of the numeric value to be converted, in this case to USD currency, per those settings. The result is a string with a dollar sign, commas as separators, decimal point, and 2 decimal places. Try this code and check the console log, to see that the variables display correctly as currency.

Once the calculations are done, and the output has been formatted to currency, add it to the feedback section on the HTML page.

After the function to calculate, be sure to include the live feedback functions as seen in the Form Validation project.

Run the project and take screenshots similar to those above: one at launch, one with all invalid data where the meal cost is not numeric, one with invalid data where the meal cost is zero or negative. Add screenshots: one with only the name invalid, one with only the password invalid. Then with all valid data, take screenshots showing each of the 4 ratings for quality of service

Tip Calculator your name password Cost of the meal Quality of Service OK (15% tip) Good (18% tip) Very Good (20% tip) Excellent (22% tip) submit Tip Calculator Student Name 25.87 Quality of Service OK (15% tip) Good (18% tip) Very Good (20% tip) Excellent (22% tip) submit Meal cost: $25.87 Tip: $4.66 Total: $30.53 let moneyFormat = new Intl. Number Format('en-US', { style: 'currency', currency: 'USD' }); let formattedTip = moneyFormat.format(tip); let formattedTotal moneyFormat.format(total); console.log( money formatter: tip: ${formattedTip}, total: ${formattedTotal}'); =