initial

joplin notion extension/Web Development/Javascript/Extras.md

@@ -0,0 +1,191 @@
+Extras
+
+- event delegation
+  to detect events in child elements without need to attach listener to each of them
+  ```js
+	// Assuming ulElement is a reference to your <ul> element
+	const ulElement = document.querySelector('ul');
+
+	// Add a click event listener to the ul element
+	ulElement.addEventListener('click', function(event) {
+		// Check if the clicked element is an li element
+		if (event.target.tagName === 'LI') {
+			// Get the text content of the clicked li element
+			const clickedText = event.target.textContent;
+
+			// Do something with the clicked text
+			console.log('Clicked li:', clickedText);
+		}
+	});
+
+	```
+- generate random string
+  ```js
+	function generateRandomString(length) {
+		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		let result = '';
+		const charactersLength = characters.length;
+		for (let i = 0; i < length; i++) {
+			result += characters.charAt(Math.floor(Math.random() * charactersLength));
+		}
+		return result;
+	}
+
+	// Example usage:
+	const randomString = generateRandomString(10); // Generates a random string of length 10
+	console.log(randomString);
+
+	```
+- form data directly through form element
+ Note : make sure that input element contains name attribute as its value is the key/field of formdata
+ just use
+  ```js
+	<form action="/route/api" method="POST">
+		<input type="text" name="city">
+	</form>
+	
+	  const onSubmit = async (e) => {
+		e.preventDefault();
+
+		const formData = new FormData(e.currentTarget);
+		  
+		// Convert FormData to a plain object for logging
+		const formDataObj = {};
+		formData.forEach((value, key) => {
+		  formDataObj[key] = value;
+		});
+
+		console.log(formDataObj); // This will log a plain object with form data
+
+		const response = await fetch("/addschool/api", {
+		  method: "POST",
+		  body: formData,
+		});
+	  };
+	
+	```
+	this will just Formdata which is not multipart but of urlencoded and field will be `city`
+	
+	for multipart form data
+	
+	```html
+	 <form onSubmit={onSubmit}>
+		<input type="text" name="city">
+	</form>
+	```
+- extract query params from url
+  ```js
+	let searchParams = new URLSearchParams(window.location.search);
+	const value = searchParams.get('field_name');
+
+	```
+- form validation methods
+ https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api
+- to launch custom events use this
+```js
+ const invalidEvent = new Event("invalid", {
+        bubbles: true,
+        cancelable: true,
+      });
+
+      console.log("invalid event");
+      e.target.dispatchEvent(invalidEvent);
+```
+
+&nbsp;
+
+- Creating most apis easily
+To create mock api easily use something like json-server(simple way with less features) or hoverfly(complex way with more features)
+https://github.com/typicode/json-server
+https://github.com/SpectoLabs/hoverfly
+&nbsp;
+
+regex tip
+- When using parentheis for grouping in js, sometimes we just want to group and not to capture when usng exec method in js so use
+  `/^(?:http|ftp):\/\/(.+)/` instead of `/^(http|ftp):\/\/(.+)/` .
+  this `?:` signals exec  to not capture
+&nbsp;
+
+conditionally set properties
+```js
+const isAdmin = true;
+
+const user = {
+  id: 1,
+  name: "Alice",
+  ...(isAdmin && { role: "admin" }) // Spreads { role: "admin" } only if isAdmin is true
+};
+
+```
+
+to convert intput element itno number easily use this
+```js
+const inputElement = document.getElementById("myInput");
+
+// Returns a native JavaScript number directly (or NaN if empty/invalid)
+const num = inputElement.valueAsNumber; 
+// const number = parseInt(inputElement.value)
+```
+
+&nbsp;
+
+abort async tasks in between
+```js
+const processController = new AbortController();
+
+async function performHeavyTask(signal) {
+  try {
+    console.log("Step 1 started...");
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    // Check if the event fired while Step 1 was running
+    signal.throwIfAborted(); 
+
+    console.log("Step 2 started...");
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    // Check again before proceeding
+    signal.throwIfAborted();
+
+    console.log("Task completed perfectly!");
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      console.log("Custom async workflow was stopped safely.");
+    }
+  }
+}
+
+// Triggering the stop on a custom event
+window.addEventListener('userLeftPage', () => {
+  processController.abort();
+});
+
+performHeavyTask(processController.signal);
+
+```
+
+for video hover and all this
+```js
+
+  let processController = null;
+  
+  videoEle.addEventListener("mouseenter", () => {
+      processController = new AbortController();
+
+      rotateThumbnails(processController.signal);
+    });
+    videoEle.addEventListener("mouseleave", () => {
+      processController.abort();
+    });
+```
+
+to get content-type of response use
+
+```js
+const response = await fetch('https://example.com');
+
+// Get the raw content-type string (e.g., "application/json; charset=utf-8")
+const contentType = response.headers.get('content-type'); 
+console.log(contentType); 
+
+```