For this WOD you will create a sales receipt for a sale that contains at least five different products (with prices of your choosing). You must use expressions and variables to compute the various needed values dynamically. That is, do not “hard code” the computations. You should be able to change the variable values and the sales receipt will compute the correct values.

Here is an example of what your invoice should look like (you can vary the look a bit if you wish):

Tasks:

1. Create a directory Invoice1 and add a file invoice.html. At the top of this file put a Javascript comment brifely describing what this file is. Use the /* ... */ to make a multi line comment.

2. Under the comment form above, add a single line comment // Product Data then underneath define varaibles for just one product:

        // Product 1
        let item1 = 'Gillette Sensor 3 Razor';
        let quantity1 = 2;
        let price1 = 1.23;
   

   Copy this and paste it 4 times. Change the variable names item2, item3, ... and corresponding values.

3. Add variables extended_price1, extended_price2, ... and corresponding expressions to compute the extended price for each product. Cooment this section // Compute extended prices

4. Add the products’ extended prices together to get an overall subtotal for the sale. Comment this section.

5. Calculate sales tax using 5.75% as your tax rate and display the tax amount. Comment this section.

6. Add together the subtotal and the tax amount to get a grand total. We won’t worry about shipping or other costs for now.

7. Add HTML to display the basic table. Create a template for one product row. to display the item, quantity, price, extended price.

8. You have two choices in generating the product rows:

Option 1: Put the row template into a document.write() then string templates to fill in the product data in the row cells. Copy and paste this 4 times and change the variables as needed for each product line.

Option 2: Add an id="invoiceTable" to the table. Remove the product row template. In its place use

    // item row 1
   let row = invoiceTable.insertRow();
   row.insertCell().innerHTML = item1; 
   row.insertCell().innerHTML = quantity1;
   row.insertCell().innerHTML = price1.toFixed(2);
   row.insertCell().innerHTML = extended_price1;

Copy and paste this 4 times and adjust the variable names.

1. In the Sub-total row, use document.write() inside the cell for the sub-total or set this cell id="subtotal_cell" and then set .innerHTML to the subtotal value. Don’t forget to add a $ sign.

2. In the tax row, do the same as above. Use .toFixed(2) to format the tax to 2 decimals.

3. In the Total row, do the same as above and use .toFixed(2) to format the grand total to 2 decimals. Display your grand total in bold print.

HINT:
Do not try to create the HTML table first. Start by simply printing each row in the table as an individual line. When you have everything calculating and printing correctly, add in the table tags.  (You could even try viewing the HTML for *this* page and copy the HTML table in the example above and then use it to change what you print in your print statement.)

HINT:
Use string templates to `document.write()` entire rows of the table rather than mixing in many little `document.write()` scripts
HINT:
Check the output as you work rather than waiting until the end. It will be faster and easier to fix problems as they occur!

Quality Checklist:

Is your code commented?
Minimum five products?
Prices not hard coded?
Subtotal is calculated correctly?
Sales tax is calculated correctly?
Total is calculated correctly?
Amounts only have 2 decimal places?
HTML table display?

Rx: <20 min Av: 30 min Sd: 40 min DNF: 40+ min              Start WOD Timer

If you get stuck you can watch an example solution screencast here.