Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Web programming - Space Worksheet

Space Worksheet

alt text

Task 1 - Create your Sun

  • open repl.it in a new tab (preferably using Google Chrome)
  • create a new html/javascript/css project
  • add these lines in the body of the HTML file (index.html)
<svg height="600" width="600">

</svg>
  • put a square inside
    • 4 coordinates (0,0) (0,600) (600,600) (600,0)
    • fill it with a black colour
<polygon points="0,0 0,600 600,600 600,0" fill="black"/>
  • put a circle for the sun in the middle
    • cx = center x value (middle)
    • cy = center y value (middle)
    • r = radius
<circle cx="300" cy="300" r="50" fill="yellow" />
  • click run at the top left - did you get what you expected?

Task 2 - put the earth and it's orbit circle

  • Let's start by putting an Earth into our solar system
    • Note - the cy value (think of the x and y grid) to move it up and down - cx moves it left and right
<circle cx="300" cy="100" r="10" fill="green" />
  • Earth will travel in an orbit around the sun (another circle!)
    • Note - fill-opacity = how see-through an item is (0.0) is see-through
<circle cx="300" cy="300" r="220" stroke-width="1" stroke="white" fill-opacity="0.0"/>

Task 3 - put all the other planets in

  • look up what other planets we have in our solar system
  • In the same way we added the Earth - add in the others
  • Hint: start off with Mercury as that is closest to the sun.
  • pay attention to the radius (r value) of some planets (jupiter is a bigger than Earth)

Remember to save your JSFiddle and write down the url somewhere - we will be animating our solar system next week!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment