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
Web Development Articles
Page 426 of 801
How to create a countdown timer with JavaScript?
A countdown timer in JavaScript uses setInterval() to update the display every second by calculating the time difference between a target date and the current time. How It Works The countdown timer works by: Setting a target date in the future Calculating the time difference every second Converting milliseconds to days, hours, minutes, and seconds Updating the display and stopping when time expires Complete Example body { ...
Read MoreGetting elements of an array depending on corresponding values of another JavaScript
Suppose we have two arrays, for example consider the following two: const array1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; const array2 = [ 1, 0, 0, 1 , 0, 0, 1, 0]; Both arrays are bound to have the same length. We need to write a function that, when provided with an element from the second array, returns a subarray from the first array containing all elements whose index corresponds to the index of the element we took as an argument in the second array. For example: findSubArray(0) should return: ...
Read MoreHow to create a typing effect with JavaScript?
To create a typing effect with JavaScript, you can simulate the appearance of text being typed character by character. This effect is commonly used for animated headers, loading messages, or interactive demonstrations. Basic Typing Effect Here's a complete example that demonstrates how to create a typing effect: body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } button { padding: 10px 20px; ...
Read MoreRemove duplicates from an array keeping its length same in JavaScript
We have to write a function that takes in an array, removes all duplicates from it and inserts the same number of empty strings at the end. For example − If we find 4 duplicate values we have to remove them all and insert four empty strings at the end. Therefore, let's write the code for this problem − Problem Analysis The task requires us to: Remove duplicate elements from the array Keep only the last occurrence of each element Replace removed duplicates ...
Read MoreHow to close list items with JavaScript?
Closing list items with JavaScript involves adding click event listeners to close buttons that hide or remove list items from the DOM. This creates an interactive list where users can dismiss items they no longer need. Complete Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { ...
Read MoreHow to create a draggable HTML element with JavaScript and CSS?
To create a draggable HTML element with JavaScript and CSS, you need to handle mouse events and update the element's position dynamically. This technique allows users to click and drag elements around the page. Basic HTML Structure Start with an HTML element that has absolute positioning and a move cursor to indicate it's draggable: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dragDiv { position: absolute; ...
Read MoreHow to use media queries with JavaScript?
JavaScript provides the window.matchMedia() method to detect and respond to CSS media query changes dynamically. This allows you to create responsive behavior that adapts to screen size, device orientation, and other media features. Basic Syntax let mediaQuery = window.matchMedia("(max-width: 768px)"); // Check if query matches if (mediaQuery.matches) { // Screen is 768px or smaller } // Listen for changes mediaQuery.addEventListener('change', function(e) { if (e.matches) { // Query now matches } }); Example: Responsive ...
Read MoreHow to create and use a Syntax Highlighter with JavaScript?
A syntax highlighter in JavaScript allows you to apply styling to specific code elements like keywords, strings, or HTML tags. This tutorial shows how to create a basic highlighter using regular expressions and DOM manipulation. Example: HTML Link Highlighter This example highlights HTML anchor tags by applying custom CSS styles: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .colorLinks { color: rgb(131, 44, 212); ...
Read MoreOrdering string in an array according to a number in the string JavaScript
We have an array of strings each of which contain one or more numbers like this − const arr = ['di5aster', 'ca1amity', 'cod3', 'ho2me3', 'ca11ing']; We are required to write a sorting function that sorts this array in ascending order of the numbers present in the strings. The correct order will be − const output = [ 'ca1amity', 'cod3', 'di5aster', 'ca11ing', 'ho2me3' ]; Therefore, let's write the code for this problem − Understanding the Problem Each string contains embedded numbers. We need to extract these numbers and sort the array ...
Read MoreHow to create animations using JavaScript?
JavaScript animations are created by repeatedly changing CSS properties over time using functions like setInterval() or requestAnimationFrame(). This allows you to create smooth visual effects directly in the browser. Basic Animation Principles JavaScript animations work by: Selecting the element to animate Using a timer function to repeatedly update CSS properties Incrementing position, size, or other properties each frame Stopping the animation when the target is reached Example: Moving and Morphing Animation ...
Read More