Update document, window

snippets/arrayToHTMLList.md

@@ -5,7 +5,7 @@ tags: browser,array,intermediate
 
 Converts the given array elements into `<li>` tags and appends them to the list of the given id.
 
-- Use `Array.prototype.map()` and `document.querySelector()` to create a list of html tags.
+- Use `Array.prototype.map()` and `Document.querySelector()` to create a list of html tags.
 
 ```js
 const arrayToHTMLList = (arr, listID) => 

snippets/copyToClipboard.md

@@ -8,7 +8,7 @@ Only works as a result of user action (i.e. inside a `click` event listener).
 
 - Create a new `<textarea>` element, fill it with the supplied data and add it to the HTML document.
 - Use `Selection.getRangeAt()`to store the selected range (if any).
-- Use `document.execCommand('copy')` to copy to the clipboard.
+- Use `Document.execCommand('copy')` to copy to the clipboard.
 - Remove the `<textarea>` element from the HTML document.
 - Finally, use `Selection().addRange()` to recover the original selected range (if any).
 - ⚠️ **NOTICE:** The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it [here](https://github.com/w3c/clipboard-apis/blob/master/explainer.adoc#writing-to-the-clipboard).

snippets/counter.md

@@ -7,7 +7,7 @@ Creates a counter with the specified range, step and duration for the specified
 
 - Check if `step` has the proper sign and change it accordingly.
 - Use `setInterval()` in combination with `Math.abs()` and `Math.floor()` to calculate the time between each new text draw.
-- Use `document.querySelector().innerHTML` to update the value of the selected element.
+- Use `Document.querySelector()`, `Element.innerHTML` to update the value of the selected element.
 - Omit the fourth parameter, `step`, to use a default step of `1`.
 - Omit the fifth parameter, `duration`, to use a default duration of `2000`ms.
 

snippets/currentURL.md

@@ -5,7 +5,7 @@ tags: browser,beginner
 
 Returns the current URL.
 
-- Use `window.location.href` to get the current URL.
+- Use `Window.location.href` to get the current URL.
 
 ```js
 const currentURL = () => window.location.href;

snippets/elementIsVisibleInViewport.md

@@ -5,7 +5,7 @@ tags: browser,intermediate
 
 Checks if the element specified is visible in the viewport.
 
-- Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values to determine if a given element is visible in the viewport.
+- Use `Element.getBoundingClientRect()` and the `Window.inner(Width|Height)` values to determine if a given element is visible in the viewport.
 - Omit the second argument to determine if the element is entirely visible, or specify `true` to determine if it is partially visible.
 
 ```js

snippets/getProtocol.md

@@ -5,7 +5,7 @@ tags: browser,beginner
 
 Gets the protocol being used on the current page.
 
-- Use `window.location.protocol` to get the protocol (`http:` or `https:`) of the current page.
+- Use `Window.location.protocol` to get the protocol (`http:` or `https:`) of the current page.
 
 ```js
 const getProtocol = () => window.location.protocol;

snippets/injectCSS.md

@@ -5,8 +5,8 @@ tags: browser,css,intermediate
 
 Injects the given css code into the current document
 
-- Use `document.createElement()` to create a new `style` element and set its type to `text/css`.
-- Use `Element.innerText` to set the value to the given css string, `document.head` and `Element.appendChild()` to append the new element to the document head.
+- Use `Document.createElement()` to create a new `style` element and set its type to `text/css`.
+- Use `Element.innerText` to set the value to the given css string, `Document.head` and `Element.appendChild()` to append the new element to the document head.
 - Return the newly created `style` element.
 
 ```js

snippets/prefersDarkColorScheme.md

@@ -5,7 +5,7 @@ tags: browser,intermediate
 
 Returns `true` if the user color scheme preference is `dark`, `false` otherwise.
 
-- Use `window.matchMedia()` with the appropriate media query to check the user color scheme preference.
+- Use `Window.matchMedia()` with the appropriate media query to check the user color scheme preference.
 
 ```js
 const prefersDarkColorScheme = () =>

snippets/prefersLightColorScheme.md

@@ -5,7 +5,7 @@ tags: browser,intermediate
 
 Returns `true` if the user color scheme preference is `light`, `false` otherwise.
 
-- Use `window.matchMedia()` with the appropriate media query to check the user color scheme preference.
+- Use `Window.matchMedia()` with the appropriate media query to check the user color scheme preference.
 
 ```js
 const prefersLightColorScheme = () =>

snippets/prefix.md

@@ -5,7 +5,7 @@ tags: browser,intermediate
 
 Returns the prefixed version (if necessary) of a CSS property that the browser supports.
 
-- Use `Array.prototype.findIndex()` on an array of vendor prefix strings to test if `document.body` has one of them defined in its `CSSStyleDeclaration` object, otherwise return `null`.
+- Use `Array.prototype.findIndex()` on an array of vendor prefix strings to test if `Document.body` has one of them defined in its `CSSStyleDeclaration` object, otherwise return `null`.
 - Use `String.prototype.charAt()` and `String.prototype.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string.
 
 ```js

snippets/recordAnimationFrames.md

@@ -6,7 +6,7 @@ tags: browser,intermediate
 Invokes the provided callback on each animation frame.
 
 - Use recursion.
-- Provided that `running` is `true`, continue invoking `window.requestAnimationFrame()` which invokes the provided callback.
+- Provided that `running` is `true`, continue invoking `Window.requestAnimationFrame()` which invokes the provided callback.
 - Return an object with two methods `start` and `stop` to allow manual control of the recording.
 - Omit the second argument, `autoStart`, to implicitly call `start` when the function is invoked.
 

snippets/redirect.md

@@ -5,7 +5,7 @@ tags: browser,beginner
 
 Redirects to a specified URL.
 
-- Use `window.location.href` or `window.location.replace()` to redirect to `url`.
+- Use `Window.location.href` or `Window.location.replace()` to redirect to `url`.
 - Pass a second argument to simulate a link click (`true` - default) or an HTTP redirect (`false`).
 
 ```js

snippets/scrollToTop.md

@@ -5,9 +5,9 @@ tags: browser,intermediate
 
 Smooth-scrolls to the top of the page.
 
-- Get distance from top using `document.documentElement.scrollTop` or `document.body.scrollTop`.
+- Get distance from top using `Document.documentElement` or `Document.body` and `Element.scrollTop`.
 - Scroll by a fraction of the distance from the top.
-- Use `window.requestAnimationFrame()` to animate the scrolling.
+- Use `Window.requestAnimationFrame()` to animate the scrolling.
 
 ```js
 const scrollToTop = () => {

snippets/serializeForm.md

@@ -6,7 +6,7 @@ tags: browser,string,intermediate
 Encode a set of form elements as a query string.
 
 - Use the `FormData` constructor to convert the HTML `form` to `FormData`, `Array.from()` to convert to an array, passing a map function as the second argument.
-- Use `Array.prototype.map()` and `window.encodeURIComponent()` to encode each field's value.
+- Use `Array.prototype.map()` and `encodeURIComponent()` to encode each field's value.
 - Use `Array.prototype.join()` with appropriate argumens to produce an appropriate query string.
 
 ```js