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
Build a Site Bookmark App with JavaScript by using Local Storage
In this tutorial, we'll build a Site Bookmark app using JavaScript, HTML, and CSS. The app will use Local Storage to save bookmarks permanently without requiring a database. Local Storage is a web storage API that allows client-side data storage. Data is stored as strings and persists even after closing the browser session. Storage capacity ranges from 2MB to 10MB depending on the browser. Features Our bookmark app will include: Add new bookmarks with site name and URL Visit saved websites Delete unwanted bookmarks Persistent storage using Local Storage File Structure ...
Read MoreHow to Convert JSON String to Array of JSON Objects Using JavaScript?
To convert JSON string to array of JSON objects using JavaScript is necessary because JSON strings cannot be directly modified or manipulated, so we need this conversion which allows us to access, modify and iterate over each item. We will be discussing three different approaches for this conversion from JSON strings to array of JSON objects. In this article we are having JSON string, our task is to convert JSON string to array of JSON objects using JavaScript. Approaches to convert JSON string to objects Here is a list of approaches to convert JSON string to array ...
Read MoreJavaScript Separate objects based on properties
Separating objects based on properties in JavaScript means rearranging a group of objects into a new structure where objects that share the same value for a specific property are placed together. Objects are collections of key-value pairs that store large data as a key with associated information as its value. In JavaScript, you often need to group objects inside a larger object based on certain properties. Separating objects based on properties in JavaScript can be done by writing a simple function using the reduce method. In this article, we will understand how to do this effectively. Understanding the ...
Read MoreJoin arrays to form string in JavaScript
JavaScript provides built-in methods to join array elements into strings. The join() method converts a single array to string, while concat() combined with join() handles multiple arrays. Input-Output Scenarios Converting a single array to string: Input = [32, 45, 65, 12, 07, 55]; Output = "32, 45, 65, 12, 7, 55" // String Joining multiple arrays into a single string: Array1 = [123, 453, 656, 654, 125, 757]; Array2 = ["Hello", "honey", "bunny"]; Output = "123, 453, 656, 654, 125, 757, Hello, honey, bunny" // String Using Array.join() Method ...
Read MoreHow to sort a JavaScript object list based on a property when the property is not consistent
When sorting JavaScript object arrays with inconsistent properties, you need a custom comparator function. This scenario commonly occurs when some objects have date values while others have null or undefined dates. The requirement is to display objects without dates at the top (sorted alphabetically by name), followed by objects with dates (sorted chronologically). Problem Overview Consider an array where some objects have date properties and others don't: const items = [ { name: "Charlie", date: "2024-03-15" }, { name: "Alice", date: null }, ...
Read MoreSubstring combination in JavaScript
We are required to write a JavaScript function that takes in two strings as the first and the second argument. Let's call these strings str1 and str2. The function should check whether there exists a substring combination in str2, that when combined yields str2. By substring combination, we mean that we can skip characters but we have to maintain the order of the characters selected from str1. For example, if the input strings are: const str1 = 'desxooajmepwele'; const str2 = 'example'; Then the output should be true because the string 'example' can be ...
Read MoreIs the string a combination of repeated substrings in JavaScript
We need to write a JavaScript function that checks if a string can be constructed by repeating a substring multiple times. This is useful for pattern detection in strings. Problem Statement Given a string, determine if it consists of a repeated pattern. For example, "abcabcabc" is made by repeating "abc" three times, while "abcdef" has no repeating pattern. Example Input and Output For the string: const str = 'thisthisthisthis'; The expected output is: const output = true; Because the string is constructed by repeating 'this' four times. ...
Read MoreUnique pairs in array that forms palindrome words in JavaScript
We are required to write a JavaScript function that takes in an array of unique words. Our function should return an array of all such index pairs, the words at which, when combined yield a palindrome word. Problem Given an array of unique words, find all pairs of indices where concatenating the words at those indices creates a palindrome. A palindrome reads the same forwards and backwards, like "racecar" or "abccba". Example Following is the code: const arr = ["abcd", "dcba", "lls", "s", "sssll"]; const findPairs = (arr = []) => { ...
Read MoreHow to create a canvas with text cursor using FabricJS?
In this article, we are going to create a canvas with a text cursor using FabricJS. A text cursor indicates text which can be selected. The text cursor is one of the native cursor styles available which can be used in the FabricJS canvas. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., that reuse the native cursor under the hood. Each of these cursors look slightly different based on operating system. Syntax new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object) Parameters ...
Read MoreHow to hide the controlling borders of a Circle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling borders of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. We can customize our controlling borders in many ways such as adding a specific colour to it, a dash pattern etc. However, we can also eliminate the borders completely by using the hasBorders property. Syntax new fabric.Circle({ hasBorders: Boolean }: Object) Parameters ...
Read More