up

2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md

@@ -0,0 +1,42 @@
+# Outer corners
+
+Outer corners are basically what we get from  [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+
+Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+
+```js
+let coords = elem.getBoundingClientRect();
+
+let answer1 = [coords.left, coords.top];
+let answer2 = [coords.right, coords.bottom];
+```
+
+# Left-upper inner corner
+
+That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+
+```js
+let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
+```
+
+# Right-bottom inner corner
+
+In our case we need to substract the border size from the outer coordinates.
+
+We could use CSS way:
+
+```js
+let answer4 = [
+  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
+  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
+];
+```
+
+An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+
+```js
+let answer4 = [
+  coords.left + elem.clientLeft + elem.clientWidth,
+  coords.top + elem.clientTop + elem.clientHeight
+];
+```