Merge pull request #239 from vplentinax/sync-ui-events

sync-ui-events

Author: vplentinax

2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md

@@ -1,4 +1,4 @@
-Can use `this` in the handler to reference "itself" here:
+Can use `this` in the handler to reference "the element itself" here:
 
 ```html run height=50
 <input type="button" onclick="this.hidden=true" value="Click to hide">

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/move-ball-coords.svg

@@ -22,7 +22,7 @@ Then the ball will be positioned relatively to the field:
 }
 ```
 
-Next we need to assign the correct `ball.style.position.left/top`. They contain field-relative coordinates now.
+Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
 
 Here's the picture:
 
@@ -36,7 +36,7 @@ To get field-relative `left` coordinate of the click, we can substract the field
 let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-Normally, `ball.style.position.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge would be under the mouse cursor.
+Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
 
 We need to move the ball half-width left and half-height up to make it center.
 

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md

@@ -29,7 +29,7 @@ Like this:
 
 So if we set `onclick` on it, then it will catch clicks to the right of the text.
 
-...but `<span>` has an implicit `display: inline`, so it occupies exactly enough place to fit all the text:
+As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
 
 ```html autorun height=50
 <span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

@@ -1,6 +1,6 @@
 The images ribbon can be represented as `ul/li` list of images `<img>`.
 
-Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visibble:
+Normally, such a ribbon is wide, but we put a fixed-size `<div>` around to "cut" it, so that only a part of the ribbon is visible:
 
 ![](carousel1.svg)