In JavaScript, the object contains various properties and methods. For every property, it contains a value. We need to compare the values of the property also to make the comparison between two objects. Here, we will learn to check if the first object contains all properties that the second object contains and compare the values for every property. Compare the object property values one by one The easiest way is to check for every property of the second object that the first object contains or not. If the first object contains that property, compare the values of both. It means ... Read More

Dark mode is very important for any website. Users with different interests visit the websites. Some of them like dark mode, and some like light mode. According to one survey, around 70 to 80% of people like dark mode, and only 20 to 30% like light mode. So, it is necessary to create a dark mode for any website, allowing users to toggle between the dark and light modes. Below, we will create a simple webpage using HTML, CSS, and JavaScript. Also, we will learn to implement the light and dark modes using JavaScript and CSS. Syntax Users can follow ... Read More

Using the Material UI library, we will learn to create a Dark Mode in ReactJS. The Material UI is the external react library that provides the designed react components that we can directly use in our react project by importing from the library. In the world, most users like dark mode, and only some love light mode. The dark mode helps us decrease visitors' eye strain and look more luxurious. So, we should allow users to choose the either dark or light mode according to their preference. In vanilla JavaScript or JQuery, we can create dark and light modes by ... Read More

The chart is very important to visualize the data, and we can show the data in various formats and analyze the pattern in the data. Also, the chart is more important for data scientists as they need to analyze the various data. Bootstrap is a library that allows us to draw various charts using JavaScript or JQuery. It contains the functions that we need to import and pass chart type and chart data as an argument of the function, and it will prepare a chart for us. This tutorial will teach us to draw various chart patterns using Bootstrap. Syntax ... Read More

The zoom-in and zoom out is an important functionality for the image. We can see every single information of the image by zoom-in. Maybe, you can press the ‘ctrl’ and ‘+’ keys together to zoom in to your browser, and you can see everything looks bigger in the browser window. The zoom-in feature is useful for reading small texts on the screen also. So, there can be various use cases of zoom in and zoom out. In this tutorial, we will learn to zoom in and zoom out images using JavaScript. Use the height and width properties to ... Read More

Anyone can make a mistake while entering the email in the input field. So, it’s the developer's responsibility to check if users have entered a valid email string. Many libraries are available to validate email addresses, which we can use with various JavaScript frameworks, but not with vanilla JavaScript. However, if we want to use any library, we need to use its CDN. Here, we will use the regular expression to validate the email address in vanilla JavaScript. Regex Used in Example 1 We have used the below regular expression pattern in example 1 to validate the email. let ... Read More

We have been given the task of validating the input string and need to check whether it is alphanumeric or not using JavaScript. The alphanumeric string contains only numeric and alphabetical characters, including uppercase or lowercase characters, and even it doesn’t contain any special characters or spaces. Below, we will see two approaches to validate an input string. Use the charCodeAt() method We can use the charCodeAT() method to get the ASCII value of any character. Here, we will iterate through every character of the string and check the ASCII value of every character. The ASCII code between 48 ... Read More

We have given the array of elements and need to use the map() on the array in reverse order with JavaScript. The map() method maps the new element related to a particular array element in the resultant array. Sometimes, we require to map the elements in reverse order. There can be many ways to use map() on an array in reverse order. We will see all approaches one by one. Introduction to map() method Syntax Follow the syntax below to use the map() method. array.map((ele, ind, array) => { return ele + 20; }) ... Read More

The filter() method is used to filter values from the array, and the map() method is used to map a new value to another array based on every value of the old array. Sometimes, we require to use the filter() and map() methods together. For example, we wanted to filter all positive numbers from the array and map their logarithmic value to the new array Let’s look at the introduction of the filter() and map() methods before we start with this tutorial. In this tutorial, we will learn to use the map and filter methods simultaneously on an array ... Read More

While working with the HTML checkboxes, sometimes developers may require to use the checkboxes to allow users to select multiple options. Also, developers need to perform some actions based on the selected checkbox. For example, you have given the checkbox with a question like are you above 18? If users check this checkbox, only show the input to take a user’s pan card number. So, we need to call a function whenever the user checks and unchecks the checkboxes. Use the onchange event The onchange event attribute allows us to invoke a function whenever the user checks and ... Read More