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 nested elements are rendered in 3D space with JavaScript?
This tutorial demonstrates how to control the 3D rendering of nested HTML elements using JavaScript and the CSS transform-style property. The transform-style property determines whether child elements are positioned in 3D space or flattened to their parent's plane. When working with 3D transformations like rotateY(), rotateX(), or rotateZ(), this property controls how nested elements maintain their 3D positioning relative to their parent container. Transform-Style Property Values The transform-style property accepts two main values: flat (default): Child elements are flattened to the parent's plane, losing their 3D positioning preserve-3d: Child elements maintain their 3D positioning in ...
Read MoreIs it safe to assume strict comparison in a JavaScript switch statement?
JavaScript switch statements use strict comparison (===) to match cases, not loose comparison (==). This means both value and type must match exactly. Understanding Switch Comparison Let's test this with a simple example to see which case matches: switch(1) { case '1': alert('Switch comparison: Not Strict.'); break; case 1: alert('Switch comparison: Strict.'); break; default: alert('Default'); } ...
Read MoreGetting Safari to recognize HTML 5
Safari versions prior to 7.0 don't recognize HTML5 semantic elements like , , , and . These elements are treated as inline by default, which can break your layout. The Problem In older Safari browsers, HTML5 elements don't have default block-level styling, causing layout issues when you expect them to behave like elements. Solution: CSS Display Block The key is to explicitly set display: block for HTML5 semantic elements: main { display: block; width: 800px; height: 800px; ...
Read MoreJavaScript WebAPI File File.type Property
The JavaScript File WebAPI file.type property returns the MIME type of a selected file. This property is essential for validating file types and handling different media formats in web applications. Syntax file.type Return Value Returns a string representing the MIME type of the file. If the type cannot be determined, it returns an empty string. Example: Getting File Type File Type Property ...
Read MoreReplace() with Split() in JavaScript to append 0 if number after comma is a single digit
When working with decimal numbers as strings, you often need to format them properly. This article shows how to append a zero to single-digit numbers after a comma using JavaScript's split() and replace() methods. Problem Statement Given a string like "250, 5", we need to: Append a zero if the number after the comma is a single digit Return -1 if the string contains more than one comma Solution Using split() and replace() We can combine split() and replace() methods to achieve this: const a = "250, 5"; const roundString = (str) ...
Read MoreHow to modify key values in an object with JavaScript and remove the underscore?
In JavaScript, you can modify object keys to remove underscores and convert them to camelCase using regular expressions combined with Object.fromEntries() and Object.entries(). Syntax const camelCaseKey = str => str.replace(/(_)(.)/g, (_, __, char) => char.toUpperCase()); const newObject = Object.fromEntries( Object.entries(originalObject).map(([key, value]) => [camelCaseKey(key), value]) ); Example // Function to convert underscore keys to camelCase var underscoreSpecifyFormat = str => str.replace(/(_)(.)/g, (_, __, v) => v.toUpperCase()); // Original object with underscore keys var JsonObject = { first_Name_Field: 'John', last_Name_Field: ...
Read MoreFinding duplicate "words" in a string - JavaScript
We need to write a JavaScript function that takes a string and returns only the words that appear more than once in the original string. For example, if the input string is: const str = "big black bug bit a big black dog on his big black nose"; Then the output should be: "big black" Solution Using indexOf() and lastIndexOf() We can identify duplicates by comparing the first and last occurrence positions of each word: const str = "big black bug bit a big black dog on his ...
Read MoreFinding the sum of unique array values - JavaScript
We are required to write a JavaScript function that takes in an array of numbers that may contain some duplicate numbers. Our function should return the sum of all the unique elements (elements that only appear once in the array) present in the array. For example, if the input array is: const arr = [2, 5, 5, 3, 2, 7, 4, 9, 9, 11]; Then the output should be 25 (3 + 7 + 4 + 11 = 25), as these are the only elements that appear exactly once. Using indexOf() and lastIndexOf() ...
Read MoreHow to convert a boolean value to string value in JavaScript?
In JavaScript, there are several ways to convert a boolean value to a string. The most common methods include using the toString() method, string concatenation, and the String() constructor. Using toString() Method The toString() method converts a boolean value to its string representation ("true" or "false"). Boolean to String Conversion var flag1 = true; var flag2 = false; ...
Read MoreHow to set the four transition properties with JavaScript?
In this tutorial, we will learn how to set the four transition properties with JavaScript. The transition is a CSS property used to set the transition effect of an element. It is a shorthand property for the following: transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay. The transitionProperty is used to specify the CSS property name that should have the transition effect. The transitionDuration property is used to specify the total time to complete the transition. The transitionTimingFunction is used to specify the speed curve of the transition. The transitionDelay is used to specify after how much time the transition will ...
Read More