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
How to convert the image into a base64 string using JavaScript?
To convert an image into a base64 string using JavaScript, you can use the FileReader API for local files or combine XMLHttpRequest with FileReader for remote images. Base64 encoding represents binary image data as a text string, making it useful for embedding images directly in HTML or CSS. Method 1: Converting Local Image Files For user-uploaded files, use the FileReader API with an input element: document.getElementById('imageInput').addEventListener('change', function(e) { ...
Read MoreSorting by 'next' and 'previous' properties (JS comparator function)
When working with linked data structures in JavaScript, you may encounter objects that reference each other through 'next' and 'previous' properties. This tutorial demonstrates how to sort such objects into their correct sequential order. Problem Statement Consider an array of objects representing pages of a website, where each object has: An id property for unique identification A next property pointing to the next page's id (unless it's the last page) A previous property pointing to the previous page's id (unless it's the first page) These objects are randomly positioned in the array, and we need ...
Read MoreAny way to solve this without concatenating these two arrays to get objects with higher value?
To find objects with higher property values from two arrays without concatenation, use the reduce() method on both arrays individually. This approach compares objects by a specific property and keeps only those with the highest values. Problem Setup Consider two arrays containing student objects with names and marks from different sections: var sectionAStudentDetails = [ {studentName: 'John', studentMarks: 78}, {studentName: 'David', studentMarks: 65}, {studentName: 'Bob', studentMarks: 98} ]; let sectionBStudentDetails = [ {studentName: 'John', studentMarks: 67}, ...
Read MoreJavaScript filter array by multiple strings
Filtering an array by multiple strings in JavaScript involves identifying elements that match any string from a given list. This is commonly used in search filters, dynamic matching, or data processing tasks. JavaScript provides simple tools like the filter method and techniques such as includes for exact matches or regular expressions for pattern-based matching. These approaches help efficiently narrow down arrays based on specific criteria. Approaches to Filter Array by Multiple Strings Here are three effective approaches to filter an array by multiple strings in JavaScript: Using filter with includes (Recommended) ...
Read MoreGroup values on same property - JavaScript
When working with arrays of objects, you often need to group items that share the same property value. This tutorial shows how to group objects by a common property and combine other properties. The Problem Suppose we have an array of objects with unit and brand properties: const arr = [ {unit: 35, brand: 'CENTURY'}, {unit: 35, brand: 'BADGER'}, {unit: 25, brand: 'CENTURY'}, {unit: 15, brand: 'CENTURY'}, {unit: 25, brand: 'XEGAR'} ]; console.log("Original array:"); console.log(arr); ...
Read MoreHow to change string to be displayed as a subscript using JavaScript?
In this tutorial, we will learn to display strings as subscripts using JavaScript. A subscript is text that appears smaller and positioned below the baseline of normal text. For example, in H2O, the "2" is a subscript. Subscripts are commonly used in mathematics (X1, Y2), chemistry (CO2, H2SO4), and scientific notation. Here, we'll explore both HTML and JavaScript methods to create subscripts. Using HTML Tag The simplest way to create subscripts is using the HTML tag. Any text inside this tag will be displayed as a subscript. Syntax Water is H2O ...
Read MoreHow to create a two dimensional array in JavaScript?
A two-dimensional array has more than one dimension, such as myarray[0][0] for element one, myarray[0][1] for element two, etc. JavaScript doesn't have true 2D arrays, but you can create arrays of arrays to achieve the same functionality. Method 1: Using Array Constructor with Loop This method creates an empty 2D array and fills it row by row: var myarray = new Array(3); for (i = 0; ...
Read MoreHow to understand JavaScript module pattern?
The JavaScript Module Pattern is a design pattern that encapsulates private and public methods and variables within a single object. It provides a way to create modular, maintainable code while avoiding global namespace pollution. What is the Module Pattern? The Module pattern uses Immediately Invoked Function Expressions (IIFE) to create a closure that contains private variables and functions. It returns an object with public methods that can access these private elements. Why Use the Module Pattern? Maintainability − Modules are self-contained and reduce dependencies, making code easier to maintain and improve independently. Namespace Protection − ...
Read MoreUnable to take a photo from webcam using HTML5 and on the first page load
When taking photos from webcam using HTML5, you may encounter issues on first page load. This typically happens due to improper initialization or missing user permissions. Here's how to properly implement webcam photo capture: HTML Structure Take Photo Declare Variables var streaming = false, video = document.querySelector('#video'), canvas = document.querySelector('#canvas'), photo = document.querySelector('#photo'), startbutton = document.querySelector('#startbutton'), width = 320, height = 0; Initialize Camera ...
Read MoreJavaScript date.@@toPrimitive() function
The JavaScript @@toPrimitive method (accessed via Symbol.toPrimitive) converts a Date object into a primitive value based on the specified hint. This method is called internally during type coercion but can also be invoked explicitly. Syntax date[Symbol.toPrimitive](hint) Parameters The hint parameter specifies the preferred type of conversion: "default" - Returns string representation (same as toString()) "string" - Returns string representation "number" - Returns numeric value (milliseconds since Unix epoch) Example: Using Symbol.toPrimitive with Different Hints ...
Read More