JS Code snippets that will come handy

AKSHY

JS Code snippets that will come handy

JS Events Best Practices

const input = document.querySelector('[name="email"]') input.addEventListener('input',(e)=>{}) //for text/number inputs const select = document.querySelector('[name="gender"]') select.addEventListener('change',(e)=>{}) //for select inputs const form = document.querySelector('[name="signup"]') form.addEventListener('submit',(e)=>{ e.preventDefault(); //dont refresh if(form.checkValidity()){ //submit the form }else{ //show error } }) //for forms

Select items

// with jQuery // Hide all instances of .box $(".box").hide(); // Without jQuery // Iterate over the nodelist of elements to hide all instances of .box document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }) //OR //Get HTMLCollection, spread it, put it in an array, give it to forEach [...document.querySelectorAll('.box')].forEach(div=>{ div.style.display = "none" })

Traversing the tree with parent(), next(), and prev()

// with jQuery // Return the next, previous, and parent element of .box $(".box").next(); $(".box").prev(); $(".box").parent(); // Without jQuery // Return the next, previous, and parent element of .box var box = document.querySelector(".box"); box.nextElementSibling; box.previousElementSibling; box.parentElement;

Working with events

// With jQuery $(".button").click(function(e) { /* handle */ }); $(".button").mouseenter(function(e) { /* handle */ }); $(document).keyup(function(e) { /* handle */ }); // Without jQuery document.querySelector(".button").addEventListener("click", (e) => { /* handle */ }); document.querySelector(".button").addEventListener("mouseenter", (e) => { /* handle */ }); document.addEventListener("keyup", (e) => { /* handle */ }); document.querySelector(".button").onclick = function(e){ /* handle */ }

Event listening for dynamically added elements

// With jQuery // Handle click events .search-result elements, // even when they're added to the DOM programmatically $(".search-container").on("click", ".search-result", handleClick); // Without jQuery // Create and add an element to the DOM var searchElement = document.createElement("div"); document.querySelector(".search-container").appendChild(searchElement); // Add an event listener to the element searchElement.addEventListener("click", handleClick);

Styling elements

// With jQuery // Pass multiple styles $(".box").css({ "color": "#000", "background-color": "red" }); // Set all styles at once (and override any existing styles) box.style.cssText = "color: #000; background-color: red";

Document ready

// With jQuery $(document).ready(function() { /* Do things after DOM has fully loaded */ }); // Without jQuery // Define a convenience method and use it var ready = (callback) => { if (document.readyState != "loading") callback(); else document.addEventListener("DOMContentLoaded", callback); } ready(() => { /* Do things after DOM has fully loaded */ });

Working with classes

// With jQuery // Add, remove, and the toggle the "focus" class $(".box").addClass("focus"); $(".box").removeClass("focus"); $(".box").toggleClass("focus"); // Without jQuery // Add, remove, and the toggle the "focus" class var box = document.querySelector(".box"); box.classList.add("focus"); box.classList.remove("focus"); box.classList.toggle("focus"); // Add "focus" and "highlighted" classes, and then remove them var box = document.querySelector(".box"); box.classList.add("focus", "highlighted"); box.classList.remove("focus", "highlighted"); // Remove the "focus" class and add "blurred" document.querySelector(".box").classList.replace("focus", "blurred"); // Check if .box has a class of "focus", and do something if (document.querySelector(".box").classList.contains("focus")) { // Do something... }

Array Map

array = document.querySelector('#parent).children') //array is an HTMLCollection, i.e. [Node,Node,Node,Node] array.map(fun) function fun(item){ return item.dataset.id } //now array is [1,2,3,4]

Array Map

Array.map – map all values to an expression. Array.filter – keep all that match a condition. Array.reduce – reduce all items to a single value.

Check if any of the parents of a node has a class/id/tag (Good when events' bubbling)

function hasParentWithMatchingSelector (target:Node, selector:string) { const allSubMenus : NodeListOf<Element> = document.querySelectorAll(selector) let myArray = Array.from(allSubMenus) return [...myArray].some(el => el !== target && el.contains(target) ) }

Fetch examples

//GET with params fetch( '/getDashboardConfigs?' + new URLSearchParams({ //Append params to URL for GET val: e.currentTarget.value }), { method: "GET", headers: { 'Content-type': 'application/json', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }) .then(res => res.json()) .then(res => { console.log(res); }); //POST fetch with body fetch('/setDashboardConfigs', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, body: JSON.stringify(sendData) //OR spread new FormData(document.querySelector('#formOne')) }) .then(response => response.json()) .then(data => { console.log(data); }) .catch(() => { this.message = 'Failed.' })

Date

Date to timestamp

let dataObject = new Date() //Sun Jul 10 2022 15:09:22 GMT+0530 (India Standard Time) let timestamp = + new Date() //1657445959799 //OR let timestamp = Number(new Date()) //1657445959799 // `+` is the Number() method operator

URL

GET params

Get all URL GET parameters as a keyed object:

let getParamsObject = ([...(new URLSearchParams(window.location.search))]).reduce((prev,curr)=>( Object.assign(prev,{[curr[0]]:curr[1]}) ),{}) /** * getParamsObject = { * param: 1, * param2: "new", * } * */

AKSHY

Home

Work

About

Blog

Contact Me

Download Résumé

LinkedIn

Github

StackOverflow

WhatsApp


©  Not at all copyrighted by Akshay K Nair.