BrowserHistory6 felt a bit easier than the last few WODs, once I started the WOD I found it easy to create the buttons, and creating new html files for the separate pages was not a challenge. It was important to include the same stylesheet to the header for all of the newly created html files to ensure there was no difference in formatting. Then we began to copy and paste the information for each page into the html of the pages to separate the information and leave the introduction for the index/home page. I find it satisfying to change the stylesheet font and background color, it is fun to customize the page and experiment with different styles. After changing the background and font color, I added an image box so the logo should show as we mouse over the buttons. Assigning the buttons to a window.location is a useful tool to know for connecting and creating an website to multiple pages. Then I assigned the button with a mouseover command to the image location for previewing of the logo for the page using the imgbox.innerHTML. It’s very important to be aware of using double or single quotes when copying and pasting image locations so there is no confusion with the code. Some advice for future WODs would be to be aware of how good coding is practiced and to note what incorrect coding looks like so we can avoid mistakes, another thing to utilize is to constantly save the code and run it to see if it works as intended.
SmartPhoneProducts1_variables started off easy, there were a few tips to code smoother and ensure there wasn’t any repitition or typos. The tips I used was Ctrl + F to find within the page, then I’m able to search words, numbers, or symbols. I used the search tip to find h2 tags to change them to a line of code for the WOD, I used a .* within the quotations to ‘include anything within h2 tags. We did the same with paragraph tags and replaced them with code provided in the WOD. The image sources then needed to be changed so each of the images corresponded with the correct image with the title and price. Then I created a new file for data called products_data.js and copied the original defined varaibles that were in the header section and pasted it into this new file. Then I linked the pages by using a script source tag in the header to ensure the data for the webpage was correct. Finally, in the products_data.js file I used a console.log function that displays that the product data is loaded. A few pieces of advice from this WOD is to ensure the pages are linked together correctly, to make sure the data is stored in the correct file.