Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
Strikethrough text with CSS
Use the text-decoration property to create strikethrough text with CSS. The line-through value draws a horizontal line through the middle of the text. Syntax text-decoration: line-through; Basic Example This text will be striked through. Using CSS Classes For better organization, use CSS classes instead of inline styles: ...
Read MoreCombining multiple images into a single one using JavaScript
JavaScript's Canvas API allows you to combine multiple images into a single composite image. This technique is useful for creating overlays, watermarks, or blending effects in web applications. How Canvas Image Combining Works The process involves loading images into a canvas element and using the drawImage() method with different alpha transparency values to create layered effects. Example: Overlaying Two Images Combining Multiple Images body { ...
Read MoreCheck if input is a number or letter in JavaScript?
JavaScript provides several methods to check if an input is a number or letter. The most common approach uses the isNaN() function, which returns true if the value is "Not a Number". Using isNaN() Function The isNaN() function converts the input to a number and checks if it's NaN (Not a Number): Check Number or Letter Enter the value: ...
Read MoreToggle hide class only on selected div with JavaScript?
To toggle hide class only on selected div, you need to set event on click button. Let's say you need to hide a specific div on the click of + sign. To get font + or - icon, you need to link font-awesome: HTML Structure The HTML contains multiple customer sections, each with a toggle button that can show/hide specific content: Toggle Hide Class Example ...
Read MoreRemove all whitespaces from string - JavaScript
We are required to write a JavaScript function that takes in a string and returns a new string with all the characters of the original string but with whitespaces removed. Method 1: Using a For Loop This approach iterates through each character and builds a new string excluding spaces: const str = "This is an example string from which all whitespaces will be removed"; const removeWhitespaces = str => { let newStr = ''; for(let i = 0; i < str.length; i++){ ...
Read MoreHow to merge an array with an object where values are arrays - JavaScript
In JavaScript, you can merge an array with an object containing array values by mapping array elements to object keys sequentially. This creates a new structure where each group contains key-value pairs. Problem Statement Given an array of values and an object with arrays as values, we want to distribute the array values across the object's arrays as keys: const arr = [1, 2, 3, 4, 5]; const obj = { group1: ["Ram", "Mohan", "Shyam"], group2: ["Jai", "Dinesh"], }; // Expected output: const expected = { ...
Read MoreHow do you check that a number is NaN in JavaScript?
NaN is a JavaScript property representing "Not-a-Number" value. It indicates that a value is not a legal number. JavaScript provides two methods to check for NaN values: Number.isNaN() and the global isNaN() function. Syntax Number.NaN Number.isNaN(value) isNaN(value) Using Number.isNaN() (Recommended) Number.isNaN() is the most reliable method as it only returns true for actual NaN values without type coercion: Check with Number.isNaN() function display() { ...
Read MoreHow to set the horizontal alignment of text with JavaScript?
The textAlign property in JavaScript controls the horizontal alignment of text within an element. You can set it to values like left, right, center, or justify. Syntax element.style.textAlign = "alignment_value"; Available Alignment Values left - Aligns text to the left (default) right - Aligns text to the right center - Centers the text justify - Stretches text to fill the line width Example: Setting Right Alignment ...
Read MoreThe dragLeave event fires before drop for HTML5 drag and drop events
In HTML5 drag and drop operations, the dragLeave event can sometimes fire unexpectedly before the drop event, causing visual inconsistencies or premature cleanup of drop zone styling. This occurs due to event bubbling and the complex nature of drag operations. Understanding the Problem The dragLeave event fires when the dragged element leaves the boundaries of a drop target. However, it can also fire when moving between child elements within the same drop zone, causing unwanted behavior. Basic Drag and Drop Setup Here's a complete working example that demonstrates the issue and solution: ...
Read MoreWhat is onclick not working for two or more links for same function in JavaScript?
When onclick events don't work for multiple elements with the same function, it's usually because you're only attaching the event to one element or using incorrect selectors. The solution is to use document.querySelectorAll() to select all matching elements and attach event listeners to each one. The Problem A common mistake is trying to attach a click event to multiple elements using document.querySelector(), which only selects the first matching element, or using incorrect event binding methods. Solution: Using querySelectorAll() with Event Listeners Here's how to properly attach click events to multiple elements: ...
Read More