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.

  1. 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:

  1. 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.

  1. 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

  2. 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>

    <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="text" id="subtotal" >

    <br>

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

    <input type="text" id="tax_rate" >

    <br>

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

    <input type="text" id="sales_tax" disabled ><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>

</html>

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

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
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if...
<?php    if(isset($_GET['submit'])){ //sanitize the input        /* Check the error from the input: if input from user is empty -> get an error string variable if input is not empty -> use preg_match() to match the pattern $pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/"; -> if it's a matched, get a success string variable */           } ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link...
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>         
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>                   <script src="code.js"></script>   </head>      <body onload="setFocus();">     <div class="container">                                       <div class="main">                                                                                <form action="#" method="post" name="form_name" id="form_id" class="form_class" >                                                                           <h2>--Principal Loan Form--</h2>                                                                                                                                                      <h5>Disclaimer: This software by no mean will precisely predict your mortgage through your lender company.  This Software will only assume the four items below in order to make an educated guess or prediction to your exact mortgage interests amount and the duration of your loan from your lender. <img...
Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets...
Part 1: Create the grid tic-tac-toe gameboard using buttons and iteration. Part 2: Human user gets to select an open cell on the grid - place an X on that button selected Part 3: Check for a win using DOM iteration - new game option if row or column matching X pattern Part 4: Computer gets to select an open cell on the grid - place an O on that button selected Part 5: Check for a win using DOM...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
Java Script I need the code to produce these 3 output. I can only get it...
Java Script I need the code to produce these 3 output. I can only get it to produce input #3 I need it to produce the following: // Input #1: // http://www.example.com // Output // http://www.example.com // Input #2: // http://www.example.com?name=r2d2 // Output // http://www.example.com // name: r2d2 // Input #3: // http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no // Output // http://www.example.com // name: r2d2 // email: [email protected] // human: no THIS IS WHAT I HAVE SO FAR: HTML <!DOCTYPE html> <html lang="en"> <head> <meta...
For this assignment, create an html page that has a login form. The form should have...
For this assignment, create an html page that has a login form. The form should have 3 input elements -- 1. This should have a type text for the user to enter UserName 2. This should have a type password (like text except cannot see the text that is typed in), for the user to enter password. 3. Submit button (type submit, as we did in class on 2/6). The form method should be set to POST and the action...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT