To create Stopwatch using HTML, CSS, and Javascript, we need to have basic understanding of working of HTML, CSS and JavaScript. HTML and CSS will be used to make UI of stopwatch where HTML will create structure of stopwatch, CSS styles the stopwatch and Javascript will be adding functionality to our stopwatch. In this tutorial, we will understand how to create stopwatch with the functionality of Start, Stop and Reset, using HTML, CSS, and JavaScript. We'll be following three steps: Creating structure of stopwatch using HTML Designing the structure using CSS ... Read More

A HTML form is a section of a document that includes controls like text fields, password fields, checkboxes, radio buttons, a submit button, menus, and so on. It allows the user to enter any data like name, email address, password, phone number, and so on that will be sent to the server for processing. HTML forms are required if we want to collect information from site visitors. The syntax for creating a form is given below. --form elements— ExampleHere is an example showing a simple form with its default behavior. Example ... Read More

The onclick event generally occurs when the user clicks on an element. It enables the programmer to run a JavaScript function when an element is clicked. This event can be used to validate a form, display warning messages, and much more. This event can be added dynamically to any element using JavaScript. Except for , , , , , , , , , , and , it supports all HTML elements. In HTML, we can use the onclick attribute and associate it with a JavaScript function. For greater flexibility, we can also use JavaScript's addEventListener() method and pass a click ... Read More

Nowadays, validation of mobile number input is a required feature for any application, and it requires validation of the length of the mobile number. Many apps use the mobile number for authentication purposes, sending OTP to users' mobile numbers for successful authentication. If the user enters the wrong mobile number, the app can face issues with sending OTP. So, before the user submits the mobile number for registration or authenticates the app, our app should validate the length of the mobile number. This tutorial will teach us various approaches to validating a mobile number using ReactJs. Before we start, users ... Read More

Email validation is an important feature we need to add to the authentication form. Nowadays, most applications use email and a one-time password for authentication. If the user enters the wrong email, they should not be able to authenticate their selves. Also, we need to validate the email while getting the user's email via the contact form. The user may enter the wrong email format due to some mistake. So, to correct users' mistakes, we can alert them by showing the error that you have entered the wrong email. Below, we will learn two approaches to validate the email address ... Read More

Sometimes, we require to take the date from the users' string format. So, users can make mistakes while entering the date value into the input field. So, we need to validate the date string at our end in the application code. Below, we will learn various solutions to validate the date in ReactJs. Use the Validator NPM Package The Validator is an NPM package that contains various methods to validate strings. For example, it contains the isDate() method, and we can validate the date string with any delimiter separated. Also, it contains the methods to validate the email and phone ... Read More

We will learn to trim white spaces from the input in ReactJS. Sometimes, users add unnecessary space at the start or end of the input by mistake. So, as a developer, we need to check if the input string contains the white space at the start or end. If we find white spaces in the input, we should trim it; Otherwise, it can cause issues. For example, we need to store the email in the database, and while registering the email, the user has also added the white spaces by mistake, and we stored the email in the database with ... Read More

ReactJS allows us to define a state object for every component. In the state object, we can add the different variables as a property of the state object. After that, we can use the state variables inside the component to render or perform other operations in the component. This tutorial will teach us to create a state object for the component and update it with various values. Use the setState to update the object in ReactJS The state object is used with the class components in ReactJS. Using the setState() method, we can update the state object. Syntax ... Read More

It is crucial to remain updated with the most recent knowledge in the fast-paced world of today. Making customizable notifications in JavaScript is one approach to accomplish this. Users may get vital messages catered to their own requirements with customizable alerts. Syntax function Alert(message, alert type) Message parameter gets string as input to be displayed on the alert box. Alert type − the type of message such as error, emergency, etc The Alert type parameter specifies the type of message, such as error, emergency, prompt, etc, that is displayed. Example 1 We will generate an alert message ... Read More

A navigation bar is part of a webpage where it contains links to appropriate sections/ pages in a website that helps users in browsing the website fast and effortlessly. The navigation bar can be implemented in many ways, but the traditional way of implementing is horizontal and vertical bars. In this article, we are going to design a vertical side navigation bar using HTML, CSS, and JavaScript. Creating a Hoverable Side Navigation Following are the steps to design hoverable side navigation buttons with HTML, CSS, and JavaScript − Step 1 − Add the following HTML code. ... Read More