Useful JavaScript Code Snippets

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.

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

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.

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.

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.

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.

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

Feedback welcomed, Thanks in advance.