JavaScript allows developers to add functionality and behaviors to the web page. Developers require to create multiple functions and variables to add functionality to different parts of the web page. While developing real-time applications, multiple developers work on the same project. So, avoiding the unintentional overriding of functions and variables while collaborating with multiple developers is necessary. In this tutorial, we will learn to prevent overriding using immediately invoked function expressions. Problem of Overriding For example, two colleagues are working on the same project, and both have defined the printAge() function inside the code and merged the code. Now, the ... Read More

Sometimes, developers require to show long words on the web page. For example, show URLs, long file names, etc. Sometimes, the word length is greater than the parent container’s, and the word breaks the container. For example, we created the card to show the file details, and the file name is very long, which can break the card, which always looks worse. So, developers require to prevent the long words from breaking the div element by wrapping the word. Before we start with the solution, let’s understand the problem via example. Example 1 (Long Word Breaking the div) In the ... Read More

In CSS, the ‘display’ property is used to set the display of the children elements. When we set the ‘inline-block’ value for the display property, it shows all children elements side by side. Also, it creates a responsive design automatically as if it doesn’t find enough space, it automatically wraps the children elements. Sometimes, we require to stop wrapping children elements to manage the space of the web pages. In such cases, we can manage the ‘white-space’ property of the CSS to avoid wrapping the children elements. Syntax Users can follow the syntax below to prevent inline-block divs from wrapping ... Read More

By default, we can drag all the HTML elements by clicking on them. However, users should not be able to drag the non-draggable element. Otherwise, they can’t be able to differentiate between the draggable and non-draggable elements, as all elements are draggable. The images are also draggable on the web page. In this tutorial, we will learn various ways to prevent the dragging of ghost images. Example 1 (Dragging the Image) In this example, we added the image to the web page. Also, we set the dimensions for the image using the CSS. In the output, users can try to ... Read More

Have you ever observed that filling the form data on any web page suggests the previous input values? Now, the question is where the browser is finding that particular value? The browser stores the data in the cookie storage and fetches it from there. It also stores the login credentials in the cookie storage to suggest to users when they visit the login page again. It is a good practice to suggest data while filling out the contact form or any other form but not while filling out the login or sign form. Now, think about the scenario in which ... Read More

Bootstrap is a popular frontend framework containing pre-styled components and allowing developers to use that directly in the application. The ‘4’ is the version of the Bootstrap. Bootstrap also contains pre-styled input components. Furthermore, it has different kinds of the input components, such as input groups, single input, etc. While creating a form, if we require to add 10s of inputs in the form, we can put some input fields side by side, such as first name and last name we can put side by side. In this tutorial, we will use Bootstrap to place two input boxes next to ... Read More

The SASS is a pre-processor built on top of the CSS to manipulate the CSS code better. It contains multiple directives and rules, making it easy to write CSS code. It also contains some very useful features such as inheritance, if/else statements, functions, etc. In SASS, we can import one file into another file and use one file's content for another. It also allows us to create inheritance between multiple classes. We can use the @extend directive to inherit one class to another class. By using inheritance in CSS, we can increase the reusability of the code. In this tutorial, ... Read More

In many cases, developers require to place an icon inside the text input or particular HTML element. For example, we are creating a form containing multiple inputs. If we put the icon related to the form input field inside the input, we can create a better UI and attractive design for the application. In this tutorial, we will use the font-awesome library to add the icon on the web page. Also, we will manipulate the CSS code to place the icon inside the input field. Syntax Users can follow the syntax below to place an icon inside the input field. ... Read More

The CSS contains multiple pseudo selectors and the ‘::before’ pseudo selector is one of them. Every pseudo selector of the CSS allows us to style the HTML elements with different styles. Also, the ‘::before’ pseudo selector allows us to set up the background image for the particular HTML, which we are going to learn in this tutorial. Before we start with the tutorial, let’s clarify that ‘:before’ and ‘::before’ are equal. CSS2 uses the ‘:before, ’ and CSS3 uses the ‘::before’. Syntax Users can follow the syntax below to use the ‘::before’ pseudo selector to set the background image for ... Read More

Nowadays, every website contains at least a single form, such as a contact form, application form, etc. It is also required to notify users when the form is submitted successfully or with errors so that users can take action again. In JQuery, we can use the submit() method to call the callback function after submitting the form. However, we can also save form data to the database in the callback functions. So, there can be many use cases where we must call the callback function after submitting the form to perform the particular operations. Syntax Users can follow the syntax ... Read More