From Bugs to Breakthroughs

For Module 3 I again worked with JavaScript. I learned more about variables, objects, and HTML elements and how they can interact. I checked the Javascript code provided for the assignment, and found that it runs without any errors. Price1 and price2 are variables that hold values of 5 and 6 respectively, while total adds those two values together. When this code is run on a webpage it displays “The total is: 11.”
document refers to the object that represents the webpage loaded in the browser window. getElementById() searched for the HTML element with id=”demo”, while innerHTML changed the content within the specified element. I learned more about how Javascript can be used to manipulate HTML content after a page loads.
I compared images saved in PNG, GIF, and JPG format. It was interesting to see how they each had their benefits. PNG produced the highest quality image and allows for a transparent background, but the file size can become quite large. JPG was good for photographic type images, and usually created a smaller file size which can allow for quicker loading. GIF allowed for transparency and animations, but did not have as wide of a range of colors as the other two formats.
Visually, after comparing the images on both desktop and mobile, I found that PNG gave me the best results when I needed a high quality image with transparency. JPG was the best when small file size and quick loading was necessary. GIF would come in handy if your page needed simple images or animations. Completing this assignment helped me understand how different image formats can play a role in how your website looks.
One thing I’d recommend before handing in: Save your three versions of the images and compare their file sizes. Then we can tweak that last paragraph of your blog post so it talks about what you found rather than just the general differences between PNG/GIF/JPG.