Moon Phase Simulator

Prompt

This took way more attempts than it should have because I was using Gemini Canvas—Thinking instead of Gemini Canvas—Pro.

Create in html, css, and javascript a self-contained, complete, and embeddable simulation that helps 6th graders learn about the relationships between the sun, Earth, and Moon as the moon goes through its phases. Show the three bodies from above with the sun at the left and the moon revolving around the earth. Use sliders to move the moon around the earth and show the lighted side. Label the phases of the moon and show the percent illuminated for one complete cycle. In a separate box, show the face of the moon as it appears from Earth's surface.

Iteration

The phases are not correct. Full moon and new moon are in the opposite positions. Also, change the simulation so that the moon can only move counterclockwise around the Earth. That was there will be no misconceptions about its revolutional orbit direction. 

Iteration 2

Add a reset to new moon button and change the label to reflect the moon's phase. It currently says New Moon when the moon is at the full moon position. Fix this.

Iteration 3

Full moon and new moon are still reversed. Make the new moon be between the sun and the earth and the full moon be when the earth is between the sun and the moon.

Iteration 4

Now the moon revolves in a clockwise direction. It should move counterclockwise around the earth. Also, the labels for waxing crescent, first quarter, waxing gibbous, waning gibbous, last quarter, and waning crescent are not showing. Fix this.

Iteration 5

The moon is still revolving clockwise around the earth. It MUST revolve counterclockwise. FIX IT!