Found 8894 Articles for Front End Technology

How to Design a Calculator with Neumorphism Effect/Soft UI in JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:42:38

202 Views

In this tutorial, we will be discussing how to design a calculator using JavaScript with a neumorphic effect, also known as a soft UI. Neumorphism is a design trend that has been growing in popularity in recent years and is characterized by its soft, rounded edges and light/dark shading. Designing the Calculator The first step in designing our calculator is to come up with a basic layout. We will be using a 12-column grid, with the following elements − A input field for the user to enter numbers A output field for the results of the calculations A series ... Read More

How to get an object containing parameters of current URL in JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:40:00

1K+ Views

JavaScript is a versatile scripting language that can be used in a number of ways. One such way is to use it to get information about the current URL. This can be useful in a number of situations, such as when you want to create a bookmark or when you want to redirect the user to a specific page. Using the Location Object The easiest way to get information about the current URL is to use the Location object. This object is a property of the window object and contains information about the current URL. To use it, simply call ... Read More

How to create a function that invokes each provided function using JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:38:27

89 Views

In JavaScript, functions are first-class objects, which means they can be passed as arguments to other functions. This is a powerful feature that can be used to create some interesting patterns. One such pattern is the "invoke- each" pattern, where a function is created that invokes each provided function with the arguments it receives. Why Use the Invoke-Each Pattern? There are a few reasons why you might want to use the invoke-each pattern. First, it can be used as a way to abstract away the details of how a set of functions are invoked. This can be helpful if the ... Read More

How to render a list without rendering an engine in JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:35:19

1K+ Views

In this tutorial, we'll be discussing how to render a list without rendering an engine in JavaScript. We'll go over the different methods and techniques that can be used to achieve this. Method 1: Using the Array.forEach() Method One way to render a list without rendering an engine in JavaScript is to use the Array.forEach() method. This method can be used to iterate over an array and execute a callback function for each element in the array. The callback function can be used to render the list. For example, we can use the callback function to create a list item ... Read More

How to get index in a sorted array based on iterator function in JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:30:45

2K+ Views

Iterator functions are used to iterate through arrays, lists, and other data structures. In JavaScript, there are several ways to get the index at which a value should be inserted into a sorted array. Using the Array sort() and indexOf() Methods The sort() method can be used to sort an array in ascending or descending order. The default sort order is ascending, so if you want to get the index at which a value should be inserted into a sorted array, you can use the sort() method with a compare function. After the array is sorted we could apply the ... Read More

How to filter values from an array using the comparator function in JavaScript?

Imran Alam
Updated on 04-Aug-2022 11:28:02

619 Views

In JavaScript, filtering an array can be done by using the filter() method. This method is used to create a new array with all the elements that pass the condition provided in the callback function. However, what if we want to filter out the values for which the comparator function does not return true? Syntax arr.filter(compare) Here compare is a comparator function used to compare the elements in the array arr. We could define it to return true or false. On the basis of the return value of the compare function, the function “filter” filters the array. Algorithm ... Read More

How to make active tab in navigation menu using HTML CSS & JavaScript?

Imran Alam
Updated on 04-Aug-2022 08:04:55

13K+ Views

With the help of HTML, CSS, and JavaScript, it is possible to create a navigation menu with a curved active tab. This can be done by using the ::before and ::after pseudo-elements to create the desired shape, and then using JavaScript to add the active class to the element. HTML The HTML for this navigation menu is very simple. There is a ul element with a class of "nav" and within that, there are six li elements, each with a class of "nav-item". Home About Services Portfolio ... Read More

How to return an object by parsing http cookie header in JavaScript?

Imran Alam
Updated on 03-Aug-2022 14:07:42

3K+ Views

Cookies are small pieces of data that are sent from a website to a user's web browser. They are used to store information about the user, such as their preferences or login status. When a user visits a website, their web browser will send a request to the server. The server will then send a response, which includes a set of headers. One of these headers is the "Cookie" header, which contains a list of all the cookies that are associated with the website. Parsing the Cookie Header In order to parse the Cookie header, we need to first split ... Read More

How to Generate Random Birthday Wishes using JavaScript?

Imran Alam
Updated on 03-Aug-2022 13:59:57

1K+ Views

In this tutorial, we will learn how to generate a random birthday wish using JavaScript. We will use the Math.random() method to generate a random number between 1 and 10. This number will be used to select a birthday wish from an array of wishes. The Math.random() Method The Math.random() method is a built-in function in JavaScript that returns a random number between 0 ( inclusive) and 1 (exclusive). Generating a Random Birthday Wish To generate a random birthday wish, we will use the Math.random() method to generate a random number between 1 and 10. This number will be used ... Read More

What is Variable Shadowing in JavaScript?

Imran Alam
Updated on 03-Aug-2022 13:54:55

4K+ Views

In programming, shadowing occurs when a variable declared in a certain scope (e.g. a local variable) has the same name as a variable in an outer scope (e.g. a global variable). When this happens, the outer variable is said to be shadowed by the inner variable. In JavaScript, variables can be shadowed in both the global and function scope. Global variables can be shadowed by function-scoped variables, and function-scoped variables can be shadowed by block-scoped variables declared with the let or const keyword. Variable Shadowing in the Global Scope In the global scope, shadowing occurs when a variable declared with ... Read More

Advertisements