E3: Preparing for WODs

29 Sep 2022

Summary

In this essay, I will be talking about my experiences with the past WODs, BrowserHistory6, SPP1, SPP2, Invoice 1 and Invoice 2. For BrowserHistory6, we had to change BrowserHistory3, by changing the table of contents to buttons instead of links to their respective sections. We also changed the style sheets so that the different sections looked different from the introduction page. In SPP1, we were to take a copy of our SPP from class and reference the headers, paragraphs, and images to the document.write structure. For SPP2, we had to work off of what we had in SPP1. We then had to use the eval function to find the brand name, price, and image so that they would load correctly in the for loop. Then for invoice 1, we were to recreate a sales receipt as a table, but instead of hard coding each line, we were to use variables in place of the hard code so it would be easier to manipulate. Invoice 2 works off of Invoice 1, with an addition of a shipping line to calculate the shipping costs. We just had to create an if-elseif-else function to calculate the shipping costs.

BrowserHistory6

For this WOD, I didn't have too much trouble changing the table of contents into buttons. The only real issue I had was with the style sheet. I am not sure as to what was going on with them because it didn't make sense when I would change the color of the body in one style sheet, it would not update on the webpage correctly until I created a new style sheet. To prepare, I went over BrowserHistory3 and read the instructions for BrowserHistory6 so that I knew what things were going to be changed in the code, and what those changes would do to the webpage.

SmartPhoneProducts1 with Variables

For this WOD, it was also pretty straight forward. The only problem I had was when I had to transfer the variables that we had to copy and paste into the header, into the products_data.js file. Once I transferred the variables into the .js file, for some reason the document.write was not registering the variables that were stated. This made it so that no pictures or prices would pop up because the console said they were not defined. The way I fixed this was to copy everything in the .js file, then delete that .js file and just create another one and paste the contents back into the newly created .js file. Then once I did this it started to work again for some weird reason. I prepared for this by reading over the instructions and seeing what needed to be put in and why. Other than the one stumble, everything else was quick and easy.

SmartPhoneProducts2

For this WOD, I had a lot more trouble with, mainly because I had problems linking my products_data.js file to the main products_display.html file. When I was stuck, I went to the provided video to see what I did wrong, but then I followed the instructions perfectly and it still didn't link correctly. So I feel that I would have to go in and get in-person help because I am not sure what is wrong with my code. Other than that though, everything else went well. I just put the variables for all the items back into the head and the code ran correctly again. Next time, I would probably ask the professor for help linking my .js file before doing the rest of the WOD to make sure that everything works well. I was told to delete var from my .js code so that it could have global scope, even though the code that we were given in the WOD had var in it, it still didn't work wehn I deleted it. Although after some troubleshooting I was able to get the code working and the for loop with the document.write function worked on the first time so that was a plus.

Invoice 1

This WOD was a bit more difficult as I it took a while to replace all the variables with their respective numbers so that the equations would reference the right numbers. I used the find and replace option to make it a bit quicker, but there were so many 1's in the code because of the prices, that it made it a bit slower when finding the 1's and replacing them with their respective variable name. Other than that, everything went pretty smoothly. I prepared for this by going back to our codes in class and looking at the ones that related to creating a table and using variables in the table instead of hard coding them.

Invoice 2

This one was pretty similar to Invoice 1, as all we needed to do was add the shipping costs by creating a simple if-elseif-else statement. It was more or less pretty straight forward. The instructions for this WOD were more detailed and easy to follow, which made this WOD a lot quicker to do than the rest of them. Then after getting the shipping costs, I was able to put it in the grand total by just putting the variable for shipping into the equation.

Advice

In conclusion, these WODs felt a bit quicker to do because there were less things to code than the other WODs. Also, I have more knowledge about how to create .html and .js files and what goes in them. Some advice on how to be better prepared is to look over the instructions and match them to the codes that we have already done in class to make it easier to know what you have to code. For the next WODs, I will look over the instructions to see if there is anything I don't know how to code so that it'll be quicker to do while recording and I don't have to figure it out while recording.