Exercise : Turtles All the Way Down

A well-known scientist (some say it was Bertrand Russell) once gave a public lecture on astronomy. He described how the earth orbits around the sun and how the sun, in turn, orbits around the center of a vast collection of stars called our galaxy. At the end of the lecture, a little old lady at the back of the room got up and said: What you have told us is rubbish. The world is really a flat plate supported on the back of a giant tortoise. The scientist gave a superior smile before replying, What is the tortoise standing on? You're very clever, young man, very clever, said the old lady. But it's turtles all the way down!

Stephen Hawking, A Brief History of Time

Exercise : Turtles All the Way Down

• We will implement a version of "turtles all the way down" in which the earth rests on the back of an elephant, which in turn rests on the back of infinite tortoises.
• The provided turtles.html contains the earth, elephant, and a single tortoise.
• Write the JavaScript code `turtles.js` to give the page infinitely-scrolling turtles. (sample solution)
• You will need to add a new turtle to the bottom of the page every time the user scrolls to the bottom. To add a turtle, append to `document.body` a new `div` with the class of `turtle`. (See next slide for more implementation details.)

Exercise : Implementation Details / Hints

`document.onscroll`
An event that occurs when the user moves the scrollbar.
`document.body.scrollHeight`
The height of the entire web page.
`window.scrollY`
The number of pixels that we have currently scrolled down from the top of the page.
`window.innerHeight`
The height of the visible area of the page currently on-screen.

Exercise Solution

```window.onload = function() {
document.onscroll = turtles;
turtles(); // in case window height is initially taller than animals
};

function turtles() {
while (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
var div = document.createElement("div");
div.className = "turtle";
document.body.appendChild(div);
}
}
```