The range input allows a selection of any value between the particular range of values. Using JavaScript, we can get the input value that users have entered in the range input. The onchage event triggers only when the user releases the mouse key. So, it will not update the value while dragging the range slider. You can face this problem in all browsers, such as chrome, safari, but not only in Firefox. Users can follow the example below to check whether the input value is updated while dragging the range input. Example 1 (Input values will not update while dragging ... Read More

Generally, developers add the submit button to submit the input field's text. However, if they allow users to submit the input value by pressing enter, it improves the UX of the application. Here, we will learn the general way to detect the key press using the key listener event. Afterwards, we can perform any operation whenever the user presses the enter key button. Syntax Users can follow the syntax below to detect whenever the user presses the enter key. input.addEventListener("keypress", function (event) { if (event.keyCode == 13) { // enter pressed ... Read More

Nowadays, many applications allow their users to upload and download files. For example, plagiarism checker tools allow users to upload a document file with some text. After that, it checks for plagiarism and generates a report, and users can download it. Everyone knows to create an upload file button using the input type file, but there are few developers who know to create a file download button using JavaScript/ JQuery. This tutorial will teach various approaches to trigger a file download when clicking an HTML button or JavaScript. Use the download attribute with HTML tag to trigger a file ... Read More

In JavaScript, we can use the splice() method to splice an array. The splice() method inserts or deletes single or multiple elements from the array. We can pass the starting index as the first parameter of the splice() method, from which we can insert or delete the elements. It takes the number of elements to delete from the array as a second parameter and array values as the third parameter to insert into the array. This tutorial will teach us to splice an array without mutating the original array. Mutating the original array means making changes to the array. Whenever ... Read More

We can create tabs using HTML, CSS & JavaScript. There can be two types of tabs. One is horizontal tabs, and another is vertical tabs. The tabs allow us to show different contents in very less space as we can show the different content according to the different tabs. We will learn to create horizontal and vertical tabs from scratch using HTML, CSS, and JavaScript. Create horizontal tabs We can show all tabs in a single row by creating horizontal tabs. Also, we can show the content of the selected tab below all tabs. Syntax Users can follow the syntax ... Read More

The hamburger menu icon has three vertical bars, which the navbar uses to expand and collapse the menu on mobile and tablet devices. This tutorial will teach us to create a hamburger menu from scratch. Here, we will use HTML, CSS, JavaScript, and Bootstrap to create a stylish hamburger menu with a navbar. Steps Users can follow the steps below to create a navbar with a hamburger menu icon. Step 1 − Create a div with a container class containing a navbar and an expandable menu. Step 2 − After that, create a div with a header class inside ... Read More

In the ES6 version of ECMAScript, promises are introduced for the first time. To use the ES6 promises in the TypeScript project, users need to modify the tsconfig.json file. Add the below code inside the ‘compilerOptions’ object. { "compilerOptions": { "target": "es6", } } Also, users can add ‘ES6’ inside the ‘lib’ property, as shown below. { "compilerOptions": { "lib": [ "es6", ... Read More

Nowadays, automation is very useful for testing the application. Many automation tools are available, and Selenium is one of them, developed in 2004. Also, it is a crossplatform tool, so we can use Selenium with most programming languages, and here we will use it with JavaScript. Users need to create the NodeJS application to use the Selenium web driver with JavaScript. Create a NodeJS Application Users can follow the steps below to create a NodeJS application. Step 1 – Open the project directory in the terminal and enter the below command. npm init -y Step 2 – ... Read More

We can create a regular expression so it can find all the substrings between the curly braces. After that, we can use the exec() or match() method to extract the matching substring. In this tutorial, we will learn to use a regular expression to get the string between curly braces using JavaScript. For example, if we have given a string like ‘This is a {string} with {curly} braces, we need to extract all substrings that reside between the curly braces. Using the exec() method with a regular expression to get the string between curly braces The exec() ... Read More

As the name suggests, the Particle.js library allows us to add particles to a particular HTML element. Also, we can change the shape of the particles number of particles in the div. We can add animation or motion to particles using the Particle.js library. Here, we will learn to change the shape, colour, and motion of particles via different examples. Syntax Users can follow the syntax below to use the Particle.js library in a JavaScript project. tsParticles.load("id", { particles: { // properties for the ... Read More