Type selectors in CSS target HTML elements directly by their tag names. They are the most basic form of CSS selectors and apply styles to all instances of a specific HTML element throughout the document. Syntax element { property: value; } Where element is any valid HTML tag name like h1, p, div, span, etc. Example: Styling Headings h1 { ... Read More
Adding an element to an array can be done using different functions for different positions. Adding an element at the end of the array This can be accomplished using the push method. For example, let veggies = ["Onion", "Raddish"]; veggies.push("Cabbage"); console.log(veggies); This will give the output − ["Onion", "Raddish", "Cabbage"] You can also use this to push multiple items at the same time as it supports a variable number of arguments. For example, let veggies = ["Onion", "Raddish"]; veggies.push("Cabbage", "Carrot", "Broccoli"); console.log(veggies); This will give the ... Read More
In traditional loops, we use break to exit early. In functional programming, JavaScript provides array methods like some() and every() that can terminate iteration based on conditions. Using Array.some() to Break Early The some() method stops iterating when the callback returns true, making it perfect for early termination: Breaking Loop Example body { font-family: ... Read More
When working with arrays in JavaScript, there are multiple ways to calculate the sum of all elements. Let's compare three popular approaches: recursion, traditional for loops, and ES6 methods like reduce(). To demonstrate performance differences, we'll test each method with a large number of iterations. This gives us insights into which approach performs best for array summation tasks. Recursive Approach The recursive method calls itself until it processes all array elements: const recursiveSum = (arr, len = 0, sum = 0) => { if(len < arr.length){ ... Read More
To check if a string contains whitespace in JavaScript, you can use several methods. The most common approaches are indexOf(), includes(), and regular expressions. Using indexOf() Method The indexOf() method returns the index of the first whitespace character, or -1 if none is found: function stringHasTheWhiteSpaceOrNot(value){ return value.indexOf(' ') >= 0; } var whiteSpace = stringHasTheWhiteSpaceOrNot("MyNameis John"); if(whiteSpace == true){ console.log("The string has whitespace"); } else { console.log("The string does not have whitespace"); } // Test with different strings console.log(stringHasTheWhiteSpaceOrNot("HelloWorld")); ... Read More
In this tutorial, we will look at a few ways to print a number with commas as thousands of separators in JavaScript and compare them to understand which one is suitable in a given context. Why do we do number formatting? In English, commas are used to separate numbers bigger than 999. Dot is the thousands separator in Germany. Sweden uses space. The separator is added after every three digits from the right. Let's briefly introduce the methods. Using the toLocaleString() Method Here, the built-in locale string method localizes the number format based on the country. ... Read More
The W3C DOM (Document Object Model) provides standardized methods to access and manipulate HTML document properties. Unlike browser-specific approaches, W3C DOM methods work consistently across all modern browsers. Common W3C DOM Methods The most frequently used methods for accessing document properties include: getElementById() - Gets element by its ID attribute getElementsByTagName() - Gets elements by tag name getElementsByClassName() - Gets elements by class name querySelector() - Gets first element matching CSS selector Example: Accessing Document Properties Here's how to access various document properties using W3C DOM methods: ... Read More
In this tutorial, we will learn how to find the coordinates of the mouse cursor with JavaScript. We need to determine the X and Y coordinates (horizontal and vertical positions) of the cursor on the screen when mouse events occur. JavaScript provides us with two essential properties to get the coordinates of the mouse cursor when events are triggered: Using event.clientX Property Using event.clientY Property Using event.clientX Property The event.clientX property returns the horizontal position (X-coordinate) of the cursor relative to the browser's viewport when an event is ... Read More
HTML5 provides the onended event that fires when audio or video playback completes. This event is essential for creating video playlists, showing completion messages, or automatically loading the next media file. Basic onended Event Example The onended event allows you to execute JavaScript when media playback finishes. Here's a simple example that shows a message: Your browser does not support the video ... Read More
CSS descendant selectors allow you to apply styles to elements that are nested inside other elements. This targeting method helps create specific styling rules without affecting similar elements elsewhere on the page. Syntax ancestor descendant { property: value; } The descendant selector uses a space between two selectors to target elements that are children, grandchildren, or any level deep within the ancestor element. Example: Styling Emphasized Text in Lists Apply yellow color to elements only when they appear inside tags: ul ... Read More
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance