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

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

Nowadays, JavaScript is useful for writing frontend and backend code. Also, it is the most widely used programming language. Furthermore, we need to get the data from other servers while developing real-time applications. We can fetch data from other servers or databases using the API, which stands for the application programming interface. Here, we will learn various methods to fetch API to get data using JavaScript. Use the fetch() method The fetch() is a browser’s method to get the data from the API. It takes the API URL as the first parameter we need to get data ... Read More

Unpacking array elements means assigning array element values to the new variables. We can assign every element to the separate variables, or we can assign some elements to the separate variables, and for the remaining elements, we can create a new array. In this tutorial, we will learn to unpack array elements into separate variables using JavaScript. Syntax Users can follow the syntax below to unpack the array elements into separate variables. let array = [element1, element2, element3, element4]; let [a, b, c, d] = array; In the above syntax, a variable contains the value of element1, ... Read More

Many web applications allow users to upload a file. Also, it shows the file content with the filename after trimming the file extension. Furthermore, sometimes we require to store the file's content in the database with the filename without extension as a key. So, various use cases require us to use the file name of the uploaded file without extension. Here, we will learn multiple ways to trim the file extension from the string using JavaScript. Use the array.split(), array.pop() and array.join() method Every file name contains the file extension after the last dot in the file name. ... Read More