Element Inspector

Assuming you haven't scratched your eyes out from the sight of comic sans, in this post I will be going to some professionally designed websites and looking at the actual HTML and CSS code that makes the websites look the way they do, and trying to figure out how they work.

The first site I will be going to to look at for elements is a site titled "If the Moon Were Only 1 Pixel". Unfortunately for those viewing this from school internet, the site is blocked for some reason (Personal Website content?) It is a very interesting website that shows a scale model of the solar system, truly depicting the amount of SPACE that is in between all of the planets in our solar system. The website even has a feature that lets you cruse along at a scaled speed of light, meaning it takes 8 minutes to get from the sun to the Earth, half an hour to Jupiter, and two hours to get to Pluto.


Of course, it would be very tedious to have to scroll all the way to every single planet when you just want to quickly look at the planets, and see how they compare to each other in size. At the top, there is a navigation bar that allows you to click on any of the icons that symbolize the planets, allowing you to jump to the planet, as you can see in the image to the left. The way this work appears to be simple, and I will explain it to the best of my ability.

Peering into the jumble of code present to create this site, I found the Navigation bar in the code, a simple list of links all named for a div. When the user clicks one of these icons, it jumps to the location of the "div" that is placed where that planet is on the chart. In the pair of images below you can see I have boxed out the table where it displays the links, and also the divs themselves, and underlined the names of the divs.

----------

The site also displays the would-be distance from the sun at the bottom. Interestingly, it allows you to choose from a variety of different units to display the distance in. This is from a small dropdown (or i suppose up?) menu that pops up when you click on the distance at the bottom. Selecting any of these causes the website to use some black magic javascript voodoo that I don't know entirely how works. Although, I do have a decent understanding of basic logic structure in coding, and can try to the best of my abilities to explain it.

Above is the actual code from the HTML, it doesn't reveal much about the inner workings of the site, but it is there nonetheless, and vitally important.

Above is the ultimate terror that is Javascript. from what I can see from it, it appears that the code assigns the distance of one kilometer to some distance in pixels, then, using the kilometer as a base, calculates what the distance would be for all of the other units of measurement, relative to the kilometer.

An interesting feature that the site contains, is a button in the lower right corner that will automatically scroll the image, to a scale speed of light, meaning it takes 8 minutes to get to Earth from the Sun, and around half an hour to get to Jupiter from the Sun.

Considering how LONG that it takes to get to the outer planets of our own solar system, I think that proves once and for all, that light speed, is just too slow.

Anyway, joking aside, this little trick appears to also use some demonic Javascript wizardry. This time unfortunately, I have next to no idea how this is working its magics. Maybe someone reading this who better understands java or just logic programming in general will see it and understand. There is also some HTML code where the button is, but that appears to only simply place the button in its place, and not actually affect the java in any way.