Introduction
BrowserHistory WODs was a new way of testing my programming knowledge that I have never seen before and I really enjoyed these assignments. I have a little experience with HTML, CSS, Javascript, and Java, so I have a basic understanding of a few fundamentals and concepts in these languages. However, trying to complete these assignments under a specific time is what made these assignments the most challenging for me. Throughout our career, time is an important factor when it comes to completing projects by a specific deadline. In addition to time constraints, we must have adequate knowledge and accuracy to complete these projects. In spite of that, there are a few problems and solutions within each WOD that I encountered, and a few things that I have learned about the Athletic Approach.
BrowserHistory1
In BrowserHistory1, the task was not too bad to complete because I was able to complete the assignment in 13 minutes on the first try. I have practiced setting up basic webpages from previous classes I have taken, and I think formatting and commonly used HTML tags such as <h1>, <img src>, <p>, <li>, along with a few other tags is what I am most comfortable with as of now. One part that I had trouble with for a few minutes was figuring out how to set the size of an image while inside an HTML document. I know that you can place CSS in HTML by using <style>, but I had no clue that you could do something as simple as defining width=100 within the same tag as the <img src>; because I normally link an external stylesheet and do all the CSS on there. Aside from this, everything else was not too bad to complete. After completing the assignment and watching the screencast, one thing I noticed I did different even though I got the same outcome was the attributes used to link the table of contents list to each of the four internal sections of the page. I used ID for my linking, and Professor Port used name for his linking. I have never used “name” before to do something like this, so I ended up doing research for the difference between these two and gained a better understanding of when to apply each attribute. I resorted to my two most favorite websites, the Mozilla Developer Network and W3 Schools, which are fantastic resources to learn HTML/CSS in my opinion! This is something else that I like about WODs because even if you think you know something, you will learn that there might be an easier or more efficient way to do something than what you are used to doing. Sometimes you might get stuck on something you might not know how to do and it is okay because many developers in the workforce don’t know every single thing about coding because it’s a lifelong learning process. Another thing that I did differently was adding an alternative text for the images. Alternative text for images is used wherein the case of an image not loading, an alternative text is shown saying what the image should be. One thing that took a couple of minutes to figure out was how to download the chrome image. For some reason, I could not right-click to download the image and had to use a png converter to convert the SVG image.
BrowserHistory2
Although I was able to finish BrowserHistory2 in around 11 minutes, this workout was a little more challenging than the first one because of the vast amount of CSS properties that can be used to style an HTML page. The only thing that stumped me in CSS was making the logos inline with the text. When I got to this part, I had no clue what CSS property to use, so I ended up just resorting to W3 Schools after about 2 minutes and discovered it was float that should be used. After getting the correct results for this WOD and watching the ScreenCast, I noticed a few things that Professor Johnson did differently than I did in the CSS. The first thing that I did differently was setting the margins. For my margin property, I used only two values to set all the margins to get the same results. For example, I said margin: 10px 50px; instead of margin: 10px 50px 10px 50px;. This is known as margin shorthand, where you can use two values to set all the margins with the first value being the top and bottom margins and the second value being the right and left margins. This is a case where you can define properties in multiple ways in CSS and this why I sometimes get confused with even the most common properties. One new thing that I learned after watching the ScreenCast was using alternative fonts for text. For example, Oswald is a sans serif font and just in case the page does not load the font, it would use a sans serif font instead. This is just like using “alt text” in html just in case an image does not load on a web page and I noticed that having fallbacks is common practice for developing just about anything in any language.
BrowserHistory3
BrowserHistory3 was the most challenging of them all and it took me 2 tries to get into the advanced range. Just like BrowserHistory2, what made this workout challenging was the CSS properties. On my first try, I only knew how to do two things. The first thing I knew what to do was creating a <div class> for each of the sections in the HTML so that I can set each section to appear side-by-side in columns. The second thing I knew how to do was set the table of contents to appear inline and for everything else, I resorted to external resources. One thing that always confused was the difference between margins and paddings because they both sort of work the same way, just for different things of the document. Padding deals with the inside space of the border to create space around content and margins deal with space outside the border. The ScreenCast definitely cleared things up for me on what each one is for and when to use them.
BrowserHistory6
Now that I have completed BrowserHistory6, this was definitely a step up from BrowserHistory3 because this WOD incorporated JavaScript. This WOD involved changing the overall look of the web page by modifying a few CSS properties, but the main point of this exercise was to utilize JavaScript attributes by adding buttons to the top of the page with the links to different html documents. A link to this WOD is here.
To prepare for this WOD, I did a quick review of the previous 3 WODs by reviewing the tasks, my code, and even my responses on this page to go over what I need to master before moving on to this WOD. I wanted to make sure that covered the User Interface Basics so that I would not waste time trying to remember how to code simple concepts in HTML/CSS.
As for my experience with this WOD, everything worked well as I was going through this WOD. What helped me was reading through the directions first so that I have a sense of what to expect and not get caught off guard by anything that seems unfamiliar. In steps 1-6, I felt more confident than before thanks to the previous WODs, but I still made quick references here and there that hindered my performance a little. One part that surprised me when I discovered that I actually got it correct was step 7, where we had to add on onclick event to the appropriate history page because that was the first time I’ve successfully done something like that without having to refer to an external source. I’m also glad that Professor Port and Professor Kazman went over this as well during Lab 5. However, when I got to step 8, I kept on getting errors in VS Code and didn’t know what was causing the problem. I did not know what I was doing wrong for a while, but I noticed the hint at the bottom which made me realize that I was confusing the parser with having multiple double quotes instead of single quotes inside of double quotes.
One thing that I could have done better for this WOD was try to use less external sources for this WOD. One of my goals is to be able to complete a WOD in at least the advanced range on the first try without referring to external sources or the screencast . It took me 2 tries to get into the advanced range, and on the third try I was able to get into the expert range after watching the screencast. I was successfully able to complete the WOD twice without referring to the screencast, but I felt like I could do better and watching the screencast after the second try definitely helped improve my time. For some reason, having a visual made it easier for me to understand why we do things the way they are and learn a few shortcuts to complete a task without overcomplicating things.
Invoice 1
Invoice1 required the use of JavaScript expressions, operators, and defining variables. For the main goal of this WOD, we had to create a basic invoice receipt with 5 different products that uses expressions and defining variables to calculate different costs. This receipt was formatted into table that divides the item, quantity purchased, the price per item, and an extended price that calculates the price per quantity bought. A subtotal was then calculated by adding the extended prices together, then tax was calculated based on this subtotal and a set tax rate, and grand total is calculated by adding the tax and subtotal. A link to this WOD instructions are here
Looking at this entire WOD as a whole, it involved defining a lot of variables for the 5 items and basic addition and multiplication computations. Using what I learned in Labs ands the previous WODs, I was able to get through the first 7 steps rather quickly because it just required defining the variables of the 5 products,multiplication to get the extended price of the products based on the quantities purchased and tax by multiplying it with the subtotal, and addition to calculate the grand total. However, I got stuck on step 8 where we had to generate product rows for the table. I chose to go with the first option because I knew more about that option than the second option which was .innerHTML. I got stuck on this part because this was the first time I have ever implemented javascript to create a table in html or just combined javascript with html in general. It took me a while, but I was able to figure it out based on what I learned in class for uses of document.write.
What I did to prepare for this WOD is I read the directions first to make sure I get heads up of what was required of me to do, just like the previous WODs. Another thing that I did to prepare for this WOD was look at the table of what the final product should look like. I think that everyone should do this more often because examining the final product before hand makes it a lot easier for you to complete the tasks since you already have an idea of what it should look like. Not having an idea of what the final product would look like is sometimes tough for me because I need a visual of something to help guide me while coding so that I can see specifically what I need to do to get to the final product. Having a visual really helps a lot!
One thing that I could have done differently is utilize the command or control F function within VS Code. Since this WOD involved defining many of the same types of variables, I could have just copied and pasted 4 more products variables after defining the variables for the first product and use the command F to quickly edit many lines at once for each product. This process was tedious because I completely forgot about this tool and this wasted a lot of time that I could have spent on another task.
Invoice 2
In Invoice 2, this was basically an add on of invoice 1 that required another line of the invoice to calculate the shipping based on the subtotal amount. An if else statement was utilized in this WOD to adjust these shipping costs based on the subtotal. Lastly, we had to update the calculations of the grand total by adding in the shipping total as well. A link to this WOD can be found here.
This WOD was not too bad for me because as a whole, it just required adding in one more line into the table. The main point of this WOD is to make use of if else statement that was covered in Lab 7 and Lab 8. I thought I was pretty confident with if else statements thanks to these labs but the part that I misread was the prices of shipping based on the subtotal. I thought I had my if else statement structure set up correctly, but I realized that the lowest subtotal shipping rate was supposed to be first in the if statement rather than the last because if the highest subtotal shipping rate was placed first in the if statement, then only that if statement would run and the shipping rate would be the same across the board because all subtotal charges would of course either be less than $100 or $100 and more, but we don’t want to overcharge for shipping.
As with the previous WOD, I read through the directions first to get a heads up of what was required of me. I was also able to realize that an if statement was needed because of the different shipping rates for different subtotals, so I quickly went over lab 7 and 8 to see how the if else statements were used. I think what helps the most with if statements to see if you have it set up correctly is to read them outloud to yourself. It may sound weird at first, but it really helped me realize errors in my logic in this WOD.
To better prepare for this WOD as with any other WOD, I always go back to previous WODs refer to this technical essay to see where I struggled and how I can improve myself when it comes to the next WOD. I would also suggest going over labs because all of the WODs require concepts that were covered in lab. Follow along in lab, ask questions, and you will do just fine when it comes to WODs!
SmartPhoneProducts2
In SmartPhoneProducts 2, the main purpose of this WOD was to create a for loop to generate the products page instead of defining each one in html as in SmartPhoneProducts1. Within this for loop, an eval() function was used to access the variables we defined, thus allowing us to generate the same final webpage as before. A Link to this WOD can be found here.
The first 3 tasks of this WOD was straightforward to do because all we had to do was make a copy of SmartPhoneProducts1, update the links for the images, convert the last section into a string template using document.write(), and move the variables to the top. However, the challenging part of this WOD was task 4, which was the task for creating the loop to generate the page. When I got to this task, I knew that I had to create a for loop instead of a while because we had to generate 5 products to display on the page. If the task did not mention anything about using eval() I would have definitely been stuck on this last task for a while. The part that I kept messing up was placing these eval() functions in between the correct html tags and using ${} correctly.
Similar to the previous WODs, to prepare for this one I looked over the entire WOD first to get a heads up on what was required of me to complete. Then I go back to recent Labs and maybe a few readings to refresh my memory on how each concept we learned was applied to activities in the labs. I also went to the previous SmartPhoneProducts and went over how/why the page works the way it works.
To better prepare for this WOD, I went over my previous entries for WODs on this technical essay to see what I struggled with and needed to improve on, regardless of whether the concept was needed to complete this WOD because the skills we learn in each WOD help us with learning new skills for the next WOD. As I have stated earlier, I think that everyone should go over their labs and WODs even if you have already completed them. I think that going over my and how each program works will help you in the long run when you need to create a program without any instructions to work off of.
Invoice1_1
In Invoice1_1, the whole purpose of this WOD was to create a running total for the invoice instead of having one line of code that computes all the extended prices of the items. Besides that, we had to delete old statements that involved subtotals and extended prices and move the tax along with the total expressions near the bottom of the table. A link to this WOD can be found here.
This WOD as a whole was not too bad for me because it was similar to the exercises we did in lab 10 that involved document.write(). In this lab, professor port showed us that we can use multiple document.write() functions create a table instead of having one long document.write() for the table. By doing this, we can define variables in between the table or each document.write(), which is what the WOD wanted us to do. We had to add an expression that computes the extended price for each item right above its row and add the extended price to the subtotal and then back into subtotal. This is known as a running total. It was pretty straightforward to create this running total because I knew that when we had to assign subtotal back into subtotal without replacing it with extended price, all we he to do was subtotal+=extended_price.
As mentioned above, Lab 10 was a huge help for me in preparing for this WOD because that’s where I learned you could use multiple document.write() functions to split up a table, but still have it treated as one table and produce the same output. Like the previous WOD, this WOD also had a previous WOD. I went over Invoice1 to review why and how that program works so that if anything went wrong that was unrelated to the task, it would be easier to spot.
What I could do better to prepare for this WOD or any WOD in general as always, is to simply go over previous labs and WODs. I can’t stress enough how much it helps when it comes to these WODs because everything that you do in these workouts are basically what you do in the labs! Also, extended readings or going more in depth about the concepts you learn definitely help as well.
SmartPhoneProducts3
In SmartPhoneProducts3, we had to convert each of the product variables into its own object with the properties of each product inside these objects. We also had to create an array to hold these products objects and use a loop to create a table with the array and objects. A link to this WOD can be found here.
This WOD as a whole was not too bad for me because of the exercises we did in Lab 10 that relate to this WOD. Converting each product into an object was not too bad because once you code the first object, you can copy and paste the rest of the objects for the products with the properties containing the correct information for each one. The array was straightforward as well because we just had to put the objects we defined into an array. The part that took me a little longer to complete, but not too long was creating the for loop to generate the table. I knew that I needed the same format, but without the eval() as in SmartPhoneProducts2. After thinking about it for a bit, I remembered that you would put the variable used in the for loop inside brackets [] so it will access that element position in the array. Then, after looking at Lab 10, I remembered that you would put use .propertyname after the brackets to access that specific property within each object.
To prepare for this WOD, Lab 10 was a huge help because an exercise we did was almost identical to what we had to do, just different variable names. This time while reading the directions before starting the WOD, I noticed that it was shorter than previous WODs and less specific on what we had to do. At this point I knew that the WODs are going to be less of a “step-by-step” assignment because at this point we should already acquired enough knowledge to understand what is required of us for each task and not rely on hints to tell us on what to do. Speaking of hints, there was also no screencast for this WOD, so if you get stuck you can’t refer to anything to give you the answer or check your work when you complete the WOD. I think this transition into tougher WODs is better for us because it requires us to think more and develop that algorithmic thinking that is essential when it comes to mastering a programming language.
To better prepare for this WOD, I could review more concepts a lot better. I know that in this WOD, I remember what I needed to do for the last task, but I could not remember specifically how to code it. I think that a little more review in Lab 10 and the readings would have definitely made it easier and smoother to complete this WOD.
Conclusion
In conclusion, these WODs in using an athletic approach to software development was a new experience for me and I very much enjoyed these assignments. They tested me on what I needed to know at my current level of programming, allowed to feel what it was like to work with time constraints, and tested my overall efficiency/accuracy to set up a basic webpage. One thing that I find useful if you are new to programming or are intimidated by this assignment is to read through the directions first before starting the timer so that you know what is required and not come across anything unexpected. It’s okay if you get stumped on some tasks because there are a multitude of resources out there and you can redo these as many times as you want. If you know nothing at all, I would not suggest going straight to the screencast because you’ll just end up copying the answers. Once you see the answers, you can’t “unsee” them and you won’t learn that much by copying. I suggest going to popular websites for programming such as MDN, W3, StackOverFlow, and more. You should also know that even if you know how to do the tasks one way, there might be an easier or more efficient way to do it and there will never be a point where you know “everything” about a programming language. Coding is a lifelong learning process and you will learn something new if you practice every day.
Link to WODs