Articles on Trending Technologies

Technical articles with clear explanations and examples

How to Create a Color Picker using HTML, CSS, and JavaScript?

Mayank Agarwal
Mayank Agarwal
Updated on 15-Mar-2026 2K+ Views

We can easily create a simple color picker on a palette in JavaScript. The primary colors on a color picker are RGB i.e. Red, Green, and Blue. With the help of mixing these colors, we can form any color we want. In this article, we will be learning about how to get the RGB value from the user and form different colors with the help of CSS using the RGB color properties. The color intensity of RGB ranges from 0 to 255 where 0 is the least intensity and 255 is the highest intensity. When the intensity of ...

Read More

How to set the horizontal scale factor of a Triangle using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 230 Views

In this tutorial, we are going to learn how to set the horizontal scale factor of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas. Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also set the horizontal scale of a triangle object. This can be done by using the scaleX property. Syntax new fabric.Triangle({ scaleX : Number ...

Read More

How to Generate Random Birthday Wishes using JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 2K+ Views

In this tutorial, we will learn how to generate a random birthday wish using JavaScript. We will use the Math.random() method to generate a random number and select a birthday wish from an array of wishes. The Math.random() Method The Math.random() method is a built-in function in JavaScript that returns a random number between 0 (inclusive) and 1 (exclusive). console.log(Math.random()); // 0.6789234567 console.log(Math.random()); // 0.1234567890 0.6789234567 0.1234567890 Creating the Array of Birthday Wishes First, we'll create an array containing various birthday wishes: var wishes = [ ...

Read More

How to design a Loan EMI Calculator using HTML, CSS and JavaScript?

Kalyan Mishra
Kalyan Mishra
Updated on 15-Mar-2026 11K+ Views

To design a Loan EMI Calculator, we will be using HTML to create the basic structure, CSS to design the user interface, and JavaScript to add functionality for calculating EMI based on loan amount, interest rate, and time period. In this article, we will understand the step-by-step process of creating a loan EMI calculator with a clean, interactive interface. Table of Contents Structuring Loan EMI Calculator using HTML Designing UI of Loan EMI Calculator using CSS Adding Functionalities using JavaScript ...

Read More

How to center a Text object horizontally and vertically on canvas using FabricJS?

Rahul Gurung
Rahul Gurung
Updated on 15-Mar-2026 487 Views

In this tutorial, we are going to learn how to center a Text horizontally and vertically on canvas using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. We can also center the text object horizontally and vertically on the canvas by using the center method. Syntax text.center() Parameters ...

Read More

How to Access the Correct "this" Inside a Callback?

Shubham Vora
Shubham Vora
Updated on 15-Mar-2026 648 Views

In this tutorial, we will learn how to access the correct "this" inside a callback function. This is a common challenge in JavaScript because callback functions can lose their original context. Understanding the "this" Problem in Callbacks The value of "this" in JavaScript depends on how a function is called, not where it's defined. When a function is passed as a callback, it often loses its original context, causing "this" to refer to something unexpected (like the global object or undefined in strict mode). The Problem: Lost Context ...

Read More

How to iterate an array of objects and build a new one in JavaScript ?

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 175 Views

Suppose, we have an array of objects like this: const arr = [ { "customer": "Customer 1", "project": "1" }, { "customer": "Customer 2", "project": "2" }, { "customer": "Customer 2", ...

Read More

Determining whether numbers form additive sequence in JavaScript

Nikitasha Shrivastava
Nikitasha Shrivastava
Updated on 15-Mar-2026 384 Views

This problem asks us to determine if the given numbers in an array form an additive sequence. An additive sequence is one where each number (starting from the third) equals the sum of the two preceding numbers. Understanding Additive Sequences An additive sequence must have at least three numbers. Each consecutive number in the series, except the first two, must equal the sum of the two numbers before it. // Example: 112358 as a string of digits // 1 + 1 = 2 // 1 + 2 = 3 // 2 + 3 = ...

Read More

Adding paragraph tag to substrings within a string in JavaScript

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 658 Views

We are required to write a JavaScript function that takes in a string str as the first argument and an array of strings, arr as the second argument. We need to add a closed pair of paragraph tag and to wrap the substrings in str that exist in arr. If two such substrings overlap, we need to wrap them together by only one pair of closed paragraph tag. Also, if two substrings wrapped by paragraph tags are consecutive, we need to combine them. For example, if the input string and the array are: const ...

Read More

Accumulating some value over using a callback function and initial value in JavaScript

AmitDiwan
AmitDiwan
Updated on 15-Mar-2026 261 Views

We need to write a JavaScript function that takes an array, a callback function, and an initial value to accumulate values over array iteration, similar to Array.prototype.reduce(). Problem The goal is to create a custom reduce function that processes each array element through a callback function, accumulating a result from an initial value. Understanding Array Reduce The reduce method applies a callback function to each array element, building up a single result value. The callback receives the accumulator (previous result) and current element as parameters. Custom Reduce Implementation const arr = [1, 2, ...

Read More
Showing 15521–15530 of 61,297 articles
Advertisements