What I learned on this mini-project.
Used to return an elements sizes and position relative to the window.
https://gist.github.com/07792a13e8d1fc450588470dfcfe10eb
It returns an object, which represents the CSS borders associated with
the element. The values returned are read-only and can not be updated, these include left, top, x and y.
Values represent the border-box in pixels and are relative to the top-left
of the viewport (this doesn't apply to width and height values).
When the scrolling position changes, the values returned, will adjust to
be bound, to the current top-left of the viewport. So, to make sure
the values are bound to the top-left of the document, you need to add the distance scrolled via scrollX and scrollY, shown below.