fixes

Author: iliakan

1-js/09-classes/01-class/article.md

@@ -119,7 +119,7 @@ alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
 
 ## Not just a syntax sugar
 
-Sometimes people say that `class` is a "syntax sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new) in JavaScript, because we could actually declare the same without `class` keyword at all:
+Sometimes people say that `class` is a "syntax sugar" (syntax that is designed to make things easier to read, but doesn't introduce anything new), because we could actually declare the same without `class` keyword at all:
 
 ```js run
 // rewriting class User in pure functions
@@ -147,7 +147,7 @@ Although, there are important differences.
 
 1. First, a function created by `class` is labelled by a special internal property `[[FunctionKind]]:"classConstructor"`. So it's not entirely the same as creating it manually.
 
-    Unlike a regular function, a class constructor can't be called without `new`:
+    Unlike a regular function, a class constructor must be called with `new`:
 
     ```js run
     class User {
@@ -176,8 +176,7 @@ Although, there are important differences.
 3. Classes always `use strict`.
     All code inside the class construct is automatically in strict mode.
 
-
-Also, in addition to its basic operation, the `class` syntax brings many other features with it which we'll explore later.
+Besides, `class` syntax brings many other features that we'll explore later.
 
 ## Class Expression
 

2-ui/1-document/11-coordinates/2-position-at/source.view/index.html

@@ -41,7 +41,13 @@
      * relative to the anchor element.
      */
     function showNote(anchor, position, html) {
-      // ... your code ...
+
+      let note = document.createElement('div');
+      note.className = "note";
+      note.innerHTML = html;
+      document.body.append(note);
+
+      positionAt(anchor, position, note);
     }
 
     // test it

2-ui/1-document/11-coordinates/2-position-at/task.md

@@ -4,12 +4,15 @@ importance: 5
 
 # Show a note near the element
 
-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on  `position` either at the top (`"top"`), right (`"right"`) or bottom (`"bottom"`) of the element `anchor`.
+Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
 
-Call it inside the function `showNote(anchor, position, html)` that shows an element with the class `"note"` and the text `html` at the given position near the anchor.
+The `position` must be a string with any one of 3 values:
+- `"top"` - position `elem` right above `anchor`
+- `"right"` - position `elem` immediately at the right of `anchor`
+- `"bottom"` - position `elem` right below `anchor`
 
-Show the notes like here:
+It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
 
-[iframe src="solution" height="350" border="1" link]
+Here's the demo of notes:
 
-P.S. The note should have `position:fixed` for this task.
+[iframe src="solution" height="350" border="1" link]

2-ui/1-document/11-coordinates/article.md

@@ -32,8 +32,8 @@ Main `DOMRect` properties:
 
 Additionally, there are derived properties:
 
-- `top/bottom` -- Y-coordinate for the top/bottom edge,
-- `left/right` -- X-coordinate for the left/right edge.
+- `top/bottom` -- Y-coordinate for the top/bottom rectangle edge,
+- `left/right` -- X-coordinate for the left/right rectangle edge.
 
 ```online
 For instance click this button to see its window coordinates:
@@ -71,11 +71,14 @@ As you can see, `x/y` and `width/height` fully describe the rectangle. Derived p
 Also:
 
 - Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to `style.position.left/top`.
-- Coordinates may be negative. For instance, if the page is scrolled down and the top `elem` is now above the window. Then, `elem.getBoundingClientRect().top` is negative.
+- Coordinates may be negative. For instance, if the page is scrolled so that `elem` is now above the window, then `elem.getBoundingClientRect().top` is negative.
 
 ```smart header="Why derived properties are needed? Why does `top/left` exist if there's `x/y`?"
+Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`.
 
-The reason is that technically it's possible for `width/height` to be negative. A rectangle starts at `(x,y)` and `(width,height)` is actually the direction vector where it goes.
+So the additional derived properties are for convenience.
+
+Please note that technically it's possible for `width/height` to be negative. A rectangle starts at `(x,y)` and `(width,height)` is actually the direction vector where it goes.
 
 Negative `width/height` may be useful for directed rectangles, e.g. to represent mouse selections with properly marked start and end.