In this WODs, I created the invoice, which is the sales receipt for sales in five different products included their different price, quantity, and the calculation in extended price, subtotal, tax, and total. The invoice was created by using HTML and JavaScript in an HTML file, which we are using expressions and variables for lots of value calculation and amount replacement dynamically through JavaScript rather than hard coding. This is a challenge for me, but I find it very interesting because I can get the same value through JavaScript rather than hard coding. The link provided a further details for this WOD:https://dport96.github.io/ITM352/morea/060.expressions-operators/experience-invoice1.html.
When I get started on creating the invoice, I look at all the tasks and steps to have a general idea of what to do and get things set up. For task 1, I did it by myself because it is a super easy thing to do, which creates an Invoice 1 folder in WODs, creates a file invoice.html in the Invoice 1 folder, then runs the server to make sure the HTML file can run to the browser. In invoice 1 HTML, I put the Emmet “doc” to set up the HTML document boilerplate. After that, I got into trouble when I started on task 2, so I watch the screencast and follow the steps synchronously. In JavaScript, I use expressions and variables to calculate the extended price, subtotal, tax, and total by input the formula to get the value dynamically in the browser. For the tax part, I first defined the value of the tax rate, then I use variables to calculate the tax rather than just put the value over there. After setting up all the calculations for the invoice, I have to display the table for it. In the easy way to display the table, I view the page source on the guideline because I would like to display a table just the same as the example, so it makes me more convivence and easier to make a table by copy the source of the table than type out by myself. Besides, I am using JavaScript to replace the variable rather than hard-coding too, by putting on the value on what I want to display in the script. Consequently, I successfully completed the Invoice page in 40 mins for the first time, which is in sd level. I finished in a long time because I follow the step of the screencast and take notes on each step to makes sure I understand what I am doing. I did the second time by only using my notes to finish it in 20 mins, which is between the Rx and average level. Finally, I finished the invoice in 18 mins (Rx level) in my third-time practice by only look at my notes, because I am already familiar with what I did in the last 2 tries. Something that I did similatly from the previous WODs are always run the localhost to browser to check if the html pages can successfully display and started the Emmt”doc” to set up the HTML document bilerplate. Somethings we did differently from the WOD before is that we are using variable and expression to display thigns rather than hard coding in JavaScript, apply calculation using variable to get the value, and always end up “;” in script.
Something that I could have done to be better prepared is read all the tasks and introduction first, in order to get things set up and briefly knowing what I have to do. Also, watch the screencast if I stuck on some parts. I will try to watch the screencast first without following by steps in the next WODs. I will take notes on the screencast and try to memorize all the processes, then get to start by only using my notes. My advice is that we can use a console to check if we have an error on the code while we run the server to the browser. We can easily get to know where the error is when it shows ‘uncaught’ and get it to fix. Moreover, I strongly suggest taking notes on each step we are doing in each task, because it will help you to memorize the steps and get to know why you are doing it in that way. In order to get more familiar with using JavaScript in HTML files and using variables and expressions rather than hard coding, we need to practice a lot and understand each step we are doing.