Found 8895 Articles for Front End Technology

Design a table using table tag and its attributes

Yaswanth Varma
Updated on 08-Sep-2023 15:33:13

98 Views

The task we are going to perform in this article is to design a table using tag and its attributes. For creating the structure of the table we use the and later we use attributes to design the table. Let's dive into the article for getting more idea on creating a table using the tag and its attributes. We use the tag to build a table, and its characteristics will be used to design the table. Cellspacing, cellpadding, border, background color, and other attributes will be used to design the table. HTML tag We occasionally ... Read More

Design a Vertical and Horizontal menu using Pure CSS

Yaswanth Varma
Updated on 09-Oct-2023 11:00:27

184 Views

The menu is a crucial component of any website. It helps visitors find your quality material and directs them to the key portions of your website. Of course, CSS is the best language for creating stunning navigation menus. It is incredibly adaptable and can be used for any kind of website. It can be shown either horizontally or vertically before the primary content of the webpage or header. The task we are going to perform in this article is to design a vertical and horizontal menu using Pure CSS. That can be done by using the and tags. ... Read More

How to add a telephone number into a form using HTML5?

Yaswanth Varma
Updated on 08-Sep-2023 15:17:40

522 Views

The task we are going to perform in this article is to add a telephone number into a form using HTML5. We are aware of the numerous benefits of using phone numbers. In case you need to collect a user's personal information, a telephone number is crucial. Additionally, a user may receive numerous messages or notifications on the form services. Let's dive into the article for getting better understanding on adding a telephone number into a form using HTML5. This can be done by using the . Using Tag A phone number can be entered and edited using ... Read More

Different ways to hide elements using CSS

Yaswanth Varma
Updated on 08-Sep-2023 17:20:47

110 Views

There are instances when you simply don't want every element of your website to be exposed. In other words, you don't want every template element of a page, post, header, or footer displayed every time it appears. And while it might appear that you need to update the template or theme code each time you want this omission to happen, that's not actually true. In fact, with only CSS, you may rapidly hide parts of your website. And it's really not that difficult. Let's dive into the article for getting better understanding of the different ways to hide elements using ... Read More

Radial Gradient HTML5 Tag

Yaswanth Varma
Updated on 11-Oct-2023 15:51:40

50 Views

The progressive change from one hue to another is known as a gradient. It lets designers practically invent a new hue. By giving a design a new level and reality, gradients help objects stand out. We can find three types of gradients in HTML, but the given task we are going to perform is about radial gradient. Let’s discuss for getting a better understanding of radial gradient HTML5 tag. Radial Gradient A radial gradient differs from a linear gradient. It radiates outward from one central point. The gradient will by default have an elliptical shape, be the largest corner, start ... Read More

How to Validate Mobile Number Length in ReactJS?

Rushi Javiya
Updated on 08-Sep-2023 12:58:57

959 Views

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

How to Validate an Email in ReactJS?

Rushi Javiya
Updated on 08-Sep-2023 12:56:23

4K+ Views

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

How to validate a Date in ReactJS?

Rushi Javiya
Updated on 08-Sep-2023 12:52:08

2K+ Views

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

How to Trim White Spaces from input in ReactJS?

Rushi Javiya
Updated on 08-Sep-2023 12:46:35

4K+ Views

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

How to update an object with setState in ReactJS?

Rushi Javiya
Updated on 08-Sep-2023 12:44:52

2K+ Views

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

Advertisements