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
Design a Digital Clock in Neumorphism Style using JavaScript
In this tutorial, we will be discussing how to design a digital clock in neumorphism style using JavaScript. Neumorphism is a design trend characterized by soft, raised elements with subtle shadows that create an embossed or pressed effect on the interface. HTML Structure Let's start by creating the basic HTML structure for our neumorphic digital clock. We need a container for the clock and display elements. Neumorphic Digital Clock ...
Read MoreHow to create 3D Geometries in webGL and p5.js?
Creating 3D geometries in WebGL and p5.js enables developers to build interactive and visually compelling web applications. With built-in functions for basic shapes, texture mapping, and transformations, both libraries provide powerful tools for 3D graphics development. Understanding WebGL vs p5.js for 3D Graphics WebGL is a low-level graphics API that provides direct access to the GPU, while p5.js offers a higher-level, artist-friendly interface. For complex 3D applications, Three.js (built on WebGL) is often preferred, whereas p5.js excels in creative coding and educational contexts. Creating Basic 3D Shapes Using Three.js (WebGL-based) Three.js simplifies WebGL by providing ...
Read MoreCenter of each side of a polygon in JavaScript
In JavaScript, finding the center (midpoint) of each side of a polygon involves calculating the average coordinates between consecutive vertices. This is useful in computational geometry for polygon analysis and graphics applications. Problem Definition Given an array of coordinate pairs representing polygon vertices, we need to find the midpoint of each side. Each side connects two consecutive vertices, and the last vertex connects back to the first vertex to close the polygon. // Example polygon coordinates (longitude, latitude) const polygonVertices = [ [-73.9280684530257, 40.8099975343718], [-73.9282820374729, 40.8100875554645], ...
Read MoreGet all substrings of a string in JavaScript recursively
In JavaScript, generating all substrings of a string can be elegantly solved using recursion. A substring is any continuous sequence of characters within a string. For example, the string "abc" has substrings: "a", "b", "c", "ab", "bc", and "abc". Understanding the Problem We need to create a recursive function that generates all possible substrings of a given input string. For the string "xy", the possible substrings are "x", "y", and "xy". The recursive approach systematically explores all starting and ending positions to build each substring. Algorithm Steps Step 1 − Define the main function that accepts ...
Read MoreFinding sum of alternative elements of the array in JavaScript
We are required to write a JavaScript function that takes in an array of Numbers as the only argument. The function should calculate and return the sum of alternative elements of the array. For example − If the input array is − const arr = [1, 2, 3, 4, 5, 6, 7]; Then the output should be − 1 + 3 + 5 + 7 = 16 Method 1: Using for Loop with Index Check This approach uses a for loop and checks if the index is even to ...
Read MoreCounting n digit Numbers with all unique digits in JavaScript
We need to write a JavaScript function that counts all n-digit numbers where every digit appears exactly once (all digits are unique). Problem Statement Given a number num, find how many numbers exist with exactly num digits where all digits are unique. For example: 1-digit numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 → Count = 10 2-digit numbers: 10, 12, 13, ..., 98 (excluding 11, 22, 33, etc.) → Count = 91 Understanding the Logic This is a combinatorics problem: 1-digit: All 10 digits (0-9) are valid 2-digit: ...
Read MoreHow to lock the horizontal skewing of Circle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal skewing of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop skewing an object horizontally. This can be done by using the lockSkewingX property. Syntax new fabric.Circle({ lockSkewingX : Boolean }: Object) Parameters options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, ...
Read MoreHow to lock the flipping during scaling of Triangle using FabricJS?
In this tutorial, we are going to learn how to lock the flipping during scaling of a triangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a triangle object in the canvas, we can also specify whether we want to stop flipping an object during scaling. This can be done by using the lockScalingFlip property. Syntax new fabric.Triangle({ lockScalingFlip : Boolean }: Object) Parameters Options (optional) − This parameter is an Object which provides additional customizations to our triangle. Using this parameter, properties ...
Read MoreHow to get the left boundary of a word in IText using FabricJS?
In this tutorial, we are going to learn about how to get the left boundary of a word in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text. Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not ...
Read MoreHow to Create a Binary Calculator using HTML, CSS and JavaScript?
A binary calculator is a program that performs mathematical calculations on binary numbers. Binary numbers consist of only two digits: 0 and 1. In this tutorial, we'll create a functional binary calculator that can perform addition, subtraction, multiplication, and division operations using HTML for structure, CSS for styling, and JavaScript for functionality. HTML Structure First, let's create the HTML structure with a form containing a display field and buttons for binary digits and operations: Binary Calculator ...
Read More