We will learn to create a dropdown list using HTML and JavaScript below. Before starting with the article, let’s understand the dropdown list and why we need to use it. The dropdown list gives multiple choices to users and allows them to select one value from all options. However, we can do the same thing using multiple radio buttons, but what if we have hundreds of choices? Then we can use the dropdown menu. When users click the dropdown button, it opens all the choices, and users can select anyone. Also, the dropdown provides a better user experience than the ... Read More

The dialog box is a popup box like a modal in ReactJS. In vanilla JavaScript, maybe you have used the alert() method, which allows us to show an alert message in the alert box. Also, vanilla JavaScript provides the confirm box and prompt box to take user input. The dialog box also allows us to perform all operations. We can add the normal HTML to the dialog box according to our requirements, and it works as a popup box. In this tutorial, we will use the various libraries to create a dialog box. Use the Material-Ui library The Material-Ui library ... Read More

The date picker allows users of the application to pick a date. If we take data in the string format from the users, they can make a mistake while entering the date and enter the wrong format of the date. So, the best way to take a correct date input from the users is using the date picker. In this tutorial, we will use various libraries of ReactJS and create a date picker allowing users to pick any date, month, year, or decade. Use the ‘react-date-picker’ NPM package The react provides various libraries and npm packages to manipulate the date ... Read More

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