Since the publishment of my first WOD technical essay, I have done additional WODs to improve my skills in coding. These additional WODs that I did were "Browser History 6," "Smart Phone Products 1 with Variables," and "Invoice 1." The "Browser History 6" WOD builds on previous "Browser History" WODs, and in this WOD, I had to perform the instructions such that the resulting product would have three in-line buttons on the top of the home page, with each button leading to an external web page containing the historical information specific to a particular web browser. Furthermore, the resulting product would also have yellow texts, black background, and the effect of producing a logo image of a web browser by hovering on that browser's button in the home page. Next, the "Smart Phone Products 1 with Variables" WOD is about retrieving the existing "Smart Phone Products" lab files from a student's previously completed labs and changing the hard-coded product names, prices, and image URLs into dynamic codes pulling each product's information from a file called "products_data.js." The "Invoice 1" WOD is about creating an invoice that lists the purchase of five different products and their respective prices, quantities, and extended prices. The invoice should also calculate the subtotal of purchasing these five products (before tax), sales tax amount (based on the subtotal), and the grand total (subtotal and sales tax combined).
For further details, please refer to the assignment page for Performing WODs Technical Essay.
Like the previous WODs, I still practiced the same method of trying this WOD first before seeking outside help. However, instead of seeking outside help immediately, I insisted to understand and follow the instructions all the way to the very last step, which took me hours due to the difficulty of understanding the parts of the instructions about creating the buttons and adding the onclick and onmouseover events. More specifically, I was not sure where would be the most accurate place for me to insert these lines of codes for creating the buttons and adding the onclick and onmouseover events. Consequently, I had to experiment with these lines of codes by putting them at places that could potentially work. Still, after many failed tries, I was able to put all the lines of codes at their correct places such that my final product was almost the same as the example. One thing that was different was the placement of the pictures. In the example, the logo image of each web browser was above the body texts, but mine still placed these logo images in-line with the body texts. As a result, I had to make some changes to the CSS Stylesheet to reposition these logo images to match with the example. Even though I struggled a bit, I was glad to find a more convenient way of doing this WOD. I found it more convenient and easier to understand by creating the button tags and inserting the onclick and onmouseover events' codes into the opening button tag. After my first try, I watched the solution video to check my work and strengthen my memory and understanding of how to do this WOD. For my second try, I understood and knew how to perform every part of this WOD such that I was able to finish this WOD in approximmately twenty-one minutes. For my third try, I took two minutes longer to complete this WOD due to explaining my performance of this WOD as detailed as possible.
For this WOD, the instructions were much simpler in comparison to the "Browser History 6" WOD, so I had no problem in understanding the instructions. I still did this WOD the same way as doing the previous WODs by attempting to do this WOD on my own without relying on any external help. I took my time to understand and perform each step of the instructions until the last step. In the last step, after I copied the code and inserted it into the empty script tags in the head section of the "products display" page, there appeared to be an error that prevented the "products display" page from retrieving product information from the "products_data.js" file. By looking at the copied code closely, I found that the slash symbol was misplaced in the code, and I immediately placed the slash symbol back at the right place. At the end, after this troubleshoot, I started the server and loaded and refreshed the "products display" page on the web browser, and the new "products display" page looked exactly the same as the original one, except that all of the hard codes about each product were replaced with JavaScript codes to make the "products display" page dynamic. Because of working on this troubleshoot, I took a little bit longer on my first try, and I speeded up my pace during my second try. I spent longer on my third try than on my first and second tries since I had to narrate my performance with as many details as possible. Overall, the experience of doing this WOD was smooth and successful.
For me, this WOD was harder than the "Browser History 6" and the "Smart Phone Products 1 with Variables" WODs. As usual, I started on my first try without relying on any external help. However, as I began doing this WOD, I ran into and stumbled on various issues. The first issue was that I tried to follow the instructions, but I did not properly structure the codes into different sections, which led to the next issue of not knowing where to insert my comment for each section. Other issues included not knowing how to create a dynamic table and not knowing what coding symbols to use for inserting a comment for each section. Consequently, I was not able to solve all of these issues, and I did not finish this WOD on my first try. After ending my first try, I immediately watched the solution video twice, with the first time trying to identify my mistakes and the second time strengthening my understanding of this WOD. From Professor Port's performance in the solution video, I also learned that I need to pay attention to details during coding, and one of the examples was how Professor Port used a "\" symbol to distinguish the dollar sign for the price from the dollar sign for the template literal. Then, with all that I have learned from the solution video, I started my second try, and it was much better. This time, I finished this WOD in a little over twenty-two minutes. Seeing my improvement on my second try, I was confident to start recording my third try, which took a few more minutes than my second try due to explaining my performance of this WOD in great detail.
Based on the problems that I encountered in these three WODs, I realized I need to do more preparations for the future WODs. Therefore, before starting on the future WODs, I will first watch more expert videos and read more readings on the units that we will learn in the upcoming weeks. I believe this is the most effective way to increase my knowledge and skills in programming and minimize problems in doing the WODs. Also, for future first tries, I will limit my time usage to prevent spending too much time and test my progress in programming skills since the beginning of the semester.