Browser History 6
Browser History 6 consisted of splitting BrowserHistory3 into 4 separate web pages. More specifically, the tasks were to make the first page the Introduction page, and then have 3 buttons that link to the other pages containing the history of the 3 browsers. Here is the link to the WOD for further details: Browser History 6 The first time I attempted this WOD, I was able to complete it successfully. However, it took me a bit longer than I wanted, so I erased my code and tried again. On the second attempt, I was able to complete this WOD in an average amount of time of a little under 25 minutes. I also almost missed a step towards the end but was able to catch it: When testing the onmouseover events, the different images for each browser are supposed to appear. However, when I first tested it, I thought it looked fine but did not realize I forgot to change the Internet Explorer image. Therefore, I had 2 buttons that were displaying the Firefox image. This was a quick fix through simply changing it to the correct URL.
SmartPhoneProducts with Variables
Smartphone Products with Variables involved using variables to eliminate hard-coding information for displaying products and separating the product data from the rest of the code. Here is the link to the WOD for further details: Smart Phone Products with Variables I felt that this WOD was relatively simple, and I was able to get it done successfully on my first try with an average time of a little under 13 minutes. I found that the steps for this WOD were clear and easy to follow, however, I had to be extra careful when changing variable names and replacing elements. Using Command + F was helpful in finding the sections I needed to edit, but I still had to double check and make sure I didn’t make any mistakes which is probably what took the longest in this WOD. I think I should look into using find and replace next time instead of just find.
Invoice 1
Invoice 1 involved creating a sales receipt that contained products using expressions and variables to compute values dynamically. Here is the link to the WOD for further details: Invoice 1 Invoice 1 had a lot of steps and I stumbled on certain parts due to careless mistakes. One of these was forgetting to change the content of certain strings for the given variables, so when I refreshed the page, it remained the same. This WOD took me a little under 30 minutes, meaning it took an average amount of time. I think what made this WOD slightly tricky was that it was a bit tedious. I had to really be careful when it came to changing the names and certain values and making sure I didn’t forget anything. I think one of the most important things in this WOD was paying attention to detail.
Invoice 2
Invoice 2 involved adding on a few more features to Invoice 1 by using Javascript expressions to create a sales receipt. In this WOD, the main tasks were to create a line on the receipt for our shipping cost, calculate the shipping cost according to the given set of conditions, and change the code so that the total would include the subtotal, tax, and shipping amounts. Here is the link to the WOD for further details: Invoice 2 I felt that I performed well on this WOD as I was able to complete it in a little over 11 minutes (average time) on my first attempt. I think a big part of this was that this WOD was just a small extension of the previous WOD, Invoice 1. The trickiest part was probably creating the if statement for the different shipping conditions. However, I felt that the shipping conditions were pretty straightforward so I was able to figure it out relatively quickly. I think this was largely possible because I reviewed the readings beforehand, so I had a pretty good idea of how if-statements work. I also read the instructions over and over again until I felt that I really understood what was being asked.
SmartPhoneProducts 2
Smart Phone Products 2 consisted of using a loop and <section> to eliminate the redundant code for displaying the products, as well as generating the product display from the data instead of hard coding it. Here is the link to the WOD for further details: Smart Phone Products 2 Although I had a working version of SmartPhoneProducts1, I thought it was a better idea to use the zip file copy provided instead since my version had spinning images. I think the most tedious step of this WOD was when I had to change the content with my 5 sections. Originally, everything was hard coded with HTML and I manually went in and changed the variables as appropriate (step 4). I made a number of mistakes in this WOD. One being that I ran into an error where my images did not show up at the end. After inspecting it, I realized it was because I was using both “img” and “image,” which messed with the display. Another was forgetting to remove < in front of my image variables. These were very small typo mistakes that were easily overlooked but ended up stopping my code from working until I fixed it. In the end, I was able to complete this WOD in 20 minutes which is an average amount of time.
The things I mainly did to prepare for these WODs included reviewing the readings and the instructions. This helped me plan out an idea in my head of what I expect to do for each step before actually doing it. I don’t think I did anything differently compared to the last WOD in terms of preparation since I did a thorough review for that one too. Although I try to prepare to the best of my ability for these WODs, mistakes and typos are bound to happen so it really is important to keep an eye out for detail and try not to rush when working.
Although I thought I looked through the instructions pretty thoroughly before starting, I still made minor errors when I recorded my WODs. I think I can do a better job at looking at the included code that we copy and paste in the instructions since it’s easy to overlook that. That way, I can avoid making the same mistakes, regarding forgetting to replace strings assigned to the given variables. Something I would try differently for the next WOD is using live-server instead of http-server since I notice that that’s what is used in the screencast solutions. That would probably make my WOD time a little faster. I also want to start using Regex/find and replace more instead of just find since it makes the job a lot easier and it should help us make less mistakes as long as we’re careful.