Useful JavaScript Code Snippets
Tags: javascript, webdev, beginners, codenewbie
Published: 2022-01-02 02:59:01

#### Calculate mouse position with respect to an element.

Element.getBoundingClientRect() method returns a DOMRect object. DOMRect object represents a smallest rectangle which contains the entire element including its padding and border-width, which also contain information about size of the element like the width and height and position of the element relative to the viewport.

To calculate the position of mouse click event with respect to an element on which the event occur, first we need the position of the click event with respect to the main element(here it is the document). e.clientX and e.clientY will help you to get that value, it will return the x axis and y axis value with respect to the top left corner of the main element. Secondly we need to get the position of the element with respect to the main element, left and top properties of the getBoundingClientRect() method will help to get that value. Substracting the left/top values from clientX/clientY values will give the position of mouse click with respect to the element.

```javascript
element.addEventListener('mousedown', function(e) {
    const target = e.target;
    const rectVal = target.getBoundingClientRect();
    const x = e.clientX - rectVal.left;
    const y = e.clientY - rectVal.top;
});
```

#### Get the position of an element relative to the document
```javascript

const rect = ele.getBoundingClientRect();
// Here ScrollLeft / ScrollTop measures the width and height of the document even if some part of the document is scrolled out. 
const top = rect.top + document.body.scrollTop;
const left = rect.left + document.body.scrollLeft;
```

#### Toggle password show function

Input type "password" make the entered text hidden by replacing each letter with an asterisk ("*") or a dot ("•"). If we change the type of the input into text we will be able to see the actual text. This approach is used to make the password text visible, we use a button, when clicked, will checks the attribute of the input field. If it is "password" we will set it to "text" and the password will be visible, when button is clicked again we will set the type back to password.  

```javascript
html
<input type="password" classs="pass" />
<button class="tbtn">Toggle</button>

JavaScript
const passInput = document.querySelector('.pass');
const toggleBtn = document.querySelector('.tbtn');

toggleBtn.addEventListener('click', function() {
    const inputType = passInput.getAttribute('type');
    if(inputType === 'password'){
        passInput.setAttribute('type', 'text')
    else if(inputType === 'text'){
        passInput.setAttribute('type', 'password')
    }
});
```

#### Scroll to top of the page
ScrollTo(x,y) method cause the web page to scroll to the value specified by the method with respect to the document's top left corner. i.e. window.scrollTo(0, 0), cause the page to scroll to a position which is 0px from left and 0px from top relative to the document's top left corner.
```javascript
window.scrollTo(0, 0);
```

#### Toggle visibility of an element

We can remove an element from the DOM just by setting the CSS display property of the element into "none", we can create a toggle to set the display value from none to block or block to none using the conditional operator in JavaScript. Conditional operator takes three operands: a condition followed by a question mark, then an expression to execute if the condition is truth followed by a colon and then an expression to execute if the condition is false. 

```javascript
const visibility = function(e) {
    const displayType = e.style.display;
    e.style.display = displayType === 'none' ? 'block' : 'none';
};
```

####Detecting Dark mode in browser

First we detect if matchMedia object exists in the browser, if not that means the browser does not support dark mode. Next we need to check the current color scheme, `window.matchMedia('(prefers-color-scheme: dark)').matches` will return true if dark mode is enabled.

```javascript
const isDarkMode = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)')
.matches;
```

Feedback welcomed, Thanks in advance.