For this assignment you'll be creating an application that has the user input a subtotal, tax...

Question

Question

For this assignment you'll be creating an application that has the user input a subtotal, tax...

For this assignment you'll be creating an application that has the user input a subtotal, tax rate and tip percentage and then displays the sales tax, tip amount and the total.

You'll use JQuery instead of the getElementByX functions AND you will display all messages on the page (no alert or prompt boxes)

The starter file is based off of the Lab 2 sales_tax application. Feel free to borrow code from your lab solution but realize you will need to update it to use jQuery.

In the HTML add
1. An input for the tip percentage
2. A disabled input to display the tip amount
3. Span tags that will display on the right side of each non-disabled input box. These will be used to display any error messages for the input.

For the JavaScript:

When the user clicks the calculate button the program should
1. Get the input for the subtotal, tax rate and tip percentage and validate.
  1. subtotal must be a valid number > 0;
  2. tax rate must be a valid number >= 0 and <=100;
  3. tip percentage must be a valid number >= 0;
2. If any field fails validation show an error message in the span to the right of the appropriate input box. These must be shown on the page as demonstrated below.

If the input is valid calculate the sales tax, tip amount, total and output the to the appropriate box.
1. Interpret the tax and tip and percentages, e.g. a tax rate of 5 would be 5%
2. The sales tax and tip amount are calculated separately, i.e. you don't tip on the sales tax and vice versa
3. The total is total + sales tax + tip amount
4. Clear any old span error messages
Program the clear button to clear all of the inputs and span error messages

The end result should use jQuery methods for setting and retrieving values from the page and for assigning click events. Examine the registerConvertToJQuery and the finished version posted in this section to see an example of using jQuery vs plain javascript.

js file code

$(document).ready( function() {

});

html code

<!DOCTYPE html>

<html>

<head>

<title>Tip and Tax Calculator</title>

</head>

<body>

<main>

<h1>Tip and Tax Calculator</h1>

<p>Enter Subtotal, Tip and Tax Rate and click "Calculate".</p>

<label for="subtotal">Subtotal:</label>

<br>

<br>

<label for="sales_tax">Sales Tax:</label>

<label for="total">Total:</label>

</main>

</body>

</html>

Engineering Computer-Science

0 0

Add a comment Transcribed image text

Answer 1

Answer #1

Following is the whole code and output screenshots.

Here is how the errors will look like whe validated.

Here is the whole code for you to copy. Let me know if you need help with something lese in this question. I have used if else conditions for validation using jquery.

<!--index.html-->
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Tip and Tax Calculator</title>

    <link rel="stylesheet" href="styles.css" />

    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script src="sales_tax.js"></script>

</head>

<body>

    <main>

        <h1>Tip and Tax Calculator</h1>

        <p>Enter Subtotal, Tip and Tax Rate and click "Calculate".</p>

        <label for="subtotal">Subtotal:</label>

        <input type="number" id="subtotal">
        <span id="subtotal" style="color: red;"></span>

        <br>
        <!-- Adding here tip percentage -->
        <label for="tip_percent">Tip Percentage:</label>

        <input type="number" id="tip_percent" name="tip_percent">
        <span id="tip_percent" style="color: red;"></span>
        <br>

        <label for="tax_rate">Tax Rate:</label>

        <input type="number" id="tax_rate">
        <span id="tax_rate" style="color: red;"></span>
        <br>


        <label for="sales_tax">Sales Tax:</label>

        <input type="text" id="sales_tax" name="sales_tax" disabled>
        <span id="sales_tax" style="color: red;"></span>

        <br>

        <label for="total">Total:</label>

        <input type="text" id="total" disabled><br>

        <label>&nbsp;</label>

        <input type="button" id="calculate" value="Calculate">

        <input type="button" id="clear" value="Clear"><br>

    </main>

</body>
<script>

// Add the whole code for funationality here. Use the formulas that you have for calculating al the values. I have only added he formula for total as mentioned in ques.
    $(document).ready(function () {
        
        //Here is the function when you click on calculate button. It will calculate validation and the total amount and dispay it in the approriate box.
        $("#calculate").click(function () {

            //Get all the values of the text boxes.
            let subtotal = $("input#subtotal").val();
            let tax_rate = $("input#tax_rate").val();
            let tip_percent = $("input#tip_percent").val();
            let sales_tax = $("input#sales_tax").val();
            let total=0;

            //Check for validation as mentioned  in  the question.
            if (subtotal < 0) {
                $("span#subtotal").text("Subtotal can't be less that 0!");
                return;
            }
            else if (tip_percent < 0) {
                $("span#tip_percent").text("Tip percentage can't be less that 0!");
                return;

            }
            else if (tax_rate < 0 || tax_rate > 100) {
                $("span#tax_rate").text("Tax Rate can't be less than 0 or greater than 100!");
                return;
            }
           else{
            $("span").text("");
           }
           
           //Calculate the total here using the formula mentioned in the question.
           //You will need to add rest of the formulas here for sales tax etc

            total+=total + sales_tax + tip_percent;
            $("input#total").val(total); //Display value in the text box of total.
        });

        //Click on clear, the errors and inputs will be cleared.
        //Getting each input box value and clearing it one by one.
        $("#clear").click(function () {
            $("span").text("");
            $("input#subtotal").val("");
            $("input#tip_percent").val("");
            $("input#tax_rate").val("");
            $("input#sales_tax").val("");
            $("input#total").val("");
        }


        )
    });

</script>

</html>

If you like the answer, please give it a thumbs up. Thank you.

0 0

Add a comment

For this assignment you'll be creating an application that has the user input a subtotal, tax...

Homework Answers

Post as a guest

Earn Coins

Not the answer you're looking for?

Similar Questions

<?php if(isset($_GET['submit'])){ //sanitize the input /* Check the error from the input: if...

Please linked both files. For this assignment you need to create a ToDo list using Javascript,...

In the previous assessment, you used a static set of named variables to store the data...

<!doctype html> <html lang=”en”> <head> <title>Principal Calculation Form</title> <meta charset="utf-8"/>

Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets...

This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...

Java Script I need the code to produce these 3 output. I can only get it...

For this assignment, create an html page that has a login form. The form should have...

TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...

Need Online Homework Help?

Active Questions