Found 8894 Articles for Front End Technology

How to Toggle Password Visibility in JavaScript?

Mayank Agarwal
Updated on 26-Apr-2022 12:09:13

470 Views

In this article, we are going to hide the password with ****. The password can be shown by toggling its visibility by using a button. We will be creating a JavaScript function that will display the hidden password when the toggle button is clicked.ApproachOn clicking the toggle button the JavaScript function to display the password will be rendered.This will change the CSS property applied on the HTML input tag that will display the password.We can toggle again to hide the password again.ExampleIn the below example, we are toggling the visibility of the password using the checkboxcheckbox. On clicking the checkbox ... Read More

How to use JavaScript to play a video on Mouse Hover and pause on Mouseout?

Mayank Agarwal
Updated on 27-Apr-2022 09:53:24

6K+ Views

In this article, we will be exploring the event listeners and how to use them for pausing and playing a video. We will be using the mouse over and the mouseout events to control the video.The main element of this article includes playing the video whenever the mouse hovers over the video and stopping/pausing the video when the mouse is taken out of that div.For achieving this specific purpose, we will be using JavaScript that will record the events and play/pause the video.ApproachWe will attach a video to our HTML DOM element and then apply the mouse over and mouse ... Read More

How to Ping a Server using JavaScript?

Mayank Agarwal
Updated on 27-Apr-2022 09:47:12

7K+ Views

A server ping can be defined as hitting a server and getting a response in return from that server. The idea is to send an echo message that will keep the health check and check whether the server is up and running or not. On sending a PING every server sends a PONG that shows that the server is active. Ping messages are sent by the ICMP (Internet Control Messaging Protocol). The lower the ping time the stronger the connection between the host and the server.ApproachWe can use a JavaScript function for sending the Ping messages to the server. In ... Read More

JavaScript: How to map array values without using "map" method?

Mayank Agarwal
Updated on 26-Apr-2022 11:19:02

1K+ Views

We can map the elements of an array by using the looping methods in JavaScript. The map() method creates a new array that will produce the outputs of a function for each element of the array. The map method can also be implemented using the for loop in JavaScript.ApproachWe will create two arrays out of which the first array contains the array elements that need to be mapped whereas the second array contains the output of the following array. We will be using the JavaScript Array push() function for returning the values of a function in the output array.Syntaxarray.push(element1, element2, ... Read More

Creating Animated Counter using HTML, CSS, and JavaScript

Mayank Agarwal
Updated on 26-Apr-2022 10:26:50

16K+ Views

In this article, we will be exploring how to create an animated counter using JavaScript and basic HTML for designing.An animated counter can be described as a display that counts an animation starting from 0 and ending at a specific number. This is generally used by popular websites for creating websites attractive and prettier.How to create animated countersWe will be using native HTML, CSS, and JavaScript for creating animated counters. Below is the approach on how to create one.We will be defining a div tag with an ID.We will add a JavaScript code to the script tag at the above div.Once ... Read More

How to Handle JavaScript Events in HTML?

Mayank Agarwal
Updated on 26-Apr-2022 10:16:07

1K+ Views

An Event is basically defined as an action or occurrence of an action that is recognized by the software. An Event can be triggered by any of the following: a user, a system, or a remote callback. Some of the popular events include pressing a button, hovering, clicking on hyperlinks, etc.In this article, we will be exploring some commonly used JavaScript events and learning how to handle these events and execute the required tasks. To handle events in HTML, we would need to add the function in the HTML tag that will be required to be executed in JavaScript when ... Read More

How to get Property Descriptors of an Object in JavaScript?

Mayank Agarwal
Updated on 26-Apr-2022 10:06:02

155 Views

In this article, we are going to explore property descriptors and how we can fetch these values from an object. The Object.getOwnPropertyDescriptor method returns an object that describes the specific property from the given object. A JavaScript object can be created in multiple ways that can be called by using the property descriptors from the object.SyntaxObject.getOwnPropertyDescriptor(obj, propThe property descriptor takes two parameters as inputs that are described below −obj − The object refers to the object name whose properties need to be described.prop − It defines the specific property from the object whose value needs to be returned.This method returns ... Read More

JavaScript: How to Check if a String is a Literal or an Object?

Mayank Agarwal
Updated on 26-Apr-2022 09:59:44

2K+ Views

In this article, we will be exploring strings and how they can be used as a literal and an object depending on the requirements.JavaScript LiteralsA JavaScript literal can be referred to as representing fixed values in source code. In most languages, values are denoted by Integers, floating-point numbers, strings, boolean, characters, arrays, records, and many more.JavaScript ObjectsOn the other hand, a JavaScript object can be defined as a list of unordered primitive data types (and sometimes reference data types) that are stored as a pair with key and value. In this list, each item is defined as a property.The type ... Read More

JavaScript: How to Find Min/Max Values Without Math Functions?

Mayank Agarwal
Updated on 26-Apr-2022 08:49:27

1K+ Views

In this article, we will explore how to find the minimum and maximum values from an array without using the Math functions. Math functions including Math.min() and Math.max() returns the minimum and maximum values out of all the numbers passed in the array.ApproachWe are going to use the same functionality of the Math functions that can be implemented using a loop.This will iterate over the array elements using the for loop and will update the minimum and maximum element in a variable after comparing it with each element from the array.On finding the value greater than the max value we ... Read More

JavaScript: How to filter out Non-Unique Values from an Array?

Mayank Agarwal
Updated on 26-Apr-2022 08:43:43

1K+ Views

Arrays are data structures used to store data in a structured format. We can store the data in an array and retrieve them using their indexes. These indexes serve as a key for these values.In this article, we will filter out non-unique values and return an array that only contains unique non-repeating elements.ApproachIn an array of unique elements, we will fetch all the elements and then compare them with the set of previous elements. If any of the elements exists already, it means it’s a duplicate element and we will remove it from the resultant array.In this article, we will ... Read More

Advertisements