The last WOD I did is called Invoice 1, which requires to make an invoice. This invoice should include five different items with different quantities and the calculated subtotal, tax and total price. In order to make it looks good and works well, I need to use both JavaScript and HTML to finish this WOD, which is a challenge.
When I started the WOD, the first thing to do is to write down the name of the item, its quantity and price, and the extended price. The extended price is required to use JavaScript to run the calculation. The second step is to copy and paste the format four times, and change each product followed the same pattern in product 1. To copy and paste the format is very important, because it can save time and be more efficient in the WOD screencasting. In order to make my code be more organize and easy to understand, I used comments to categorize each product and explain some important calculation, which helped me a lot later. Next, I used JavaScript to calculate the subtotal, tax and total price. After these three steps, all variables were set up and ready to use for the table.
At first, I thought I need to write a HTML table format, but there was a shortcut provided in the video, that was very useful. To create the HTML table format, I just needed to open the page source of the instruction web page and copy the HTML table format from it. Instead of spending lots of time in writing the format, I only needed to change the HTML static table to dynamic table by using JavaScript. However, this process was not easy. The script tab should be placed inside the table tab with a document write command after it. At first, I thought I need to put a single quuote or a double quoate inside the parentheses after the document write command, but it did not work well. I was struggle in this part for around ten minutes. Later, I found out that I should put a backtick instead of a single or double quote. This step slowed me down and took me lots of time to figure out the right way to do so. Almost at the end of the Invoice 1, I found that it was very important to separate the usage of dollor sign ($). Sometimes, I just wanted to use it to indicate money; sometimes I used it to get my JavaScript variable. It is very important to have a clear logic when we are writing JavaScript code.
In the instuction page, it provided two options to do the invoice table. One is what I used to finish my Invoice 1 WOD, which is directly copy the HTML from the page source and make some changes in VSC. Another way is to use JavaScript to add table in the HTML file. The second option looks difficult, but I want to try it next time to challenge myself. For the next WOD, I might try to use JavaScript more frequently to practice more.