In summary, this code creates an interactive animation where clicking on the Earth causes it and the Moon to rotate(cliking again - rotates in another side). Additionally, it generates a starry background with animated stars.
Brief overview of what this code does:
-
HTML Elements: It defines HTML elements for displaying "Planets," "Earth," and "Moon."
-
JavaScript Animation: It adds an event listener to the "Earth" element to trigger a rotation animation when it is clicked. The Earth and Moon will rotate in opposite directions.
-
Rotate Function: This function handles the rotation of the Moon around the Earth's orbit. It updates the Moon's rotation angle based on a toggle and applies a CSS transform to achieve the rotation effect.
-
Star Animation: It generates a starry background by creating multiple HTML elements with a "star" class. Each star has a random position, color, and animation delay.