11/12: Filling Out the Cases / Solution for directions


When doing this exercise, I had problems with figuring out how to get it to move in the direction that it wanted. Up didn't go up. I had to use top. So for my directions I used the following:

For left: {left: '-=10px'} (given)
For right: {left: '+=10px'} (figured it was opposite of left and using right didn't do anything.
For up: {top: '-=10px'}
For down: {top: '+=10px'}


"Top, left, bottom, right" is the property name of css, they present the position of your screen four edge. It's like the origin of coordinate system, but you have 4 origin, 4 ways to describe it.

For up: {top: '-=10px'}

For example: In the CSS

line1: top: 20px;
/* First position, the origin is Top edge of screen, and the distance between spirit and origin is 20px. Positive number making it closed to the center, negative making it out of screen. */

line2: top: 10px;
/* Second position is more closed to the Top edge, so making spirit like moving from bottom to the top */