fixes

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`.
+
+Here's the demo of notes:
 
 [iframe src="solution" height="350" border="1" link]
-
-P.S. The note should have `position:fixed` for this task.

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.