Login Design In React.js - Get Reactjs Assignments Help

Today, in this blog we will learn how to create a login form in react.js using state and functions.

Functionalities

1. Login form will be displayed with email, password and confirm password fields and a login button.

2. Make input fields to take input with the help of useState hook.

const [email,setEmail]=useState('')
        const [password,setPassword]=useState('')
        const [confirmPassword,setConfirmPassword]=useState('')

With the help of onChange event set input value of email,password,confirmPassword.

<input type="email" id="email" className="email" value={email}
                             onChange={(e)=>setEmail(e.target.value)} required></input>

<input type="password" id="password" className="password" value={password}
                             onChange={(e)=>setPassword(e.target.value)} required></input>

<input type="password" id="confirmPassword" className="confirmPassword"
                             value={confirmPassword} onChange={(e)=>setConfirmPassword(e.target.value)} required></input>

Full react.js code for login

import React, { useState } from 'react';
import Axios from 'react';
import './style.css'

export default function Login() {
        
        const [email,setEmail]=useState('')
        const [password,setPassword]=useState('')
        const [confirmPassword,setConfirmPassword]=useState('')

            const Handle=async(e)=>{
                        e.preventDefault();
                        console.log(email,password,confirmPassword)
                        const url=""
                        const data=await Axios(url,{email,password,confirmPassword})
                        console.log(data)
            }


    return (
        <div className='login1'>
            <div className='navbar'>
                <h1>CodersArts</h1>
            </div>
            <div className='login-body'>
               
                <div className='login-form'>
                    <form className='form'>
                        
                        <h1>Login</h1>
                        <div className="input-field divemail">
                            <label htmlFor="email" id='lemail'>Email</label>
                            <input type="email" id="email" className="email" value={email}
                             onChange={(e)=>setEmail(e.target.value)} required></input>
                        </div>
                        
                        <div className="input-field">
                            <label htmlFor="password">Password </label>

                            <input type="password" id="password" className="password" value={password}
                             onChange={(e)=>setPassword(e.target.value)} required></input>
                        </div>
                        <div className="input-field">
                            <label htmlFor="confirmPassword">Confirm Password</label>
                            <input type="password" id="confirmPassword" className="confirmPassword"
                             value={confirmPassword} onChange={(e)=>setConfirmPassword(e.target.value)} required></input>
                        </div>
                        <div className='login-button'>
                            <button className='btn' onClick={(e)=>Handle(e)}>LogIn</button>
                        </div>
                    </form>
                </div>
            </div>

            <div className='footer'>
                <h1>Footer</h1>

            </div>

        </div>
    )

}

CSS design used in login form

*{
    margin: 0%;
    padding: 0%;
}


.login1{
    width: 100vw;
    height: 100vh;
    
}
.navbar{
    height: 8%;
    background-color: aqua;
}

.navbar h1{
    margin-left: 0%;
    font-family: Arial, Helvetica, sans-serif;
}

.login1 .login-body{
    height: 80%;
    
}

.login-body .login-form{
    
    width: 100%;
    align-items: center;
}


.login-body .login-form .form{
    margin-left: 30%;
    width: 40%;
    margin-top: 5%;
    background-color: aliceblue;
    border-radius: 20px;
}
.login-body .login-form .form .input-field{
    display: flex;
}
.login-body .login-form .form .input-field .name{
    margin-top: 30px;
}
.login-body .login-form .form .input-field label{
    width: 20%;
    margin: .5rem;
    padding: 10px;
    /* background-color: #102030; */
}
.login-body .login-form .form .input-field input{
    width: 70%;
    height: 20%;
    padding: 10px;
    margin: .5rem;
    border-radius: 10px;
    margin-right: 30px;
    border: 1px solid black;

}

.login-body .login-form .form .login-button .btn{
    margin-left: 74%;
    width: 20%;
    height: 40px;
    color: #102030;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 10px;
    background-color: rgb(252, 203, 113);
    cursor: pointer;
    transition: 0s ease-in-out;
}
.login-body .login-form .form .login-button .btn:hover{
    background-color: rgb(138, 247, 138);
}
.form h1{
    text-align: center;
    margin: 10px;
}
#lemail{
    margin-top: 20px;
    
   
}
#email{
    margin-top: 20px;
    

}
.login1 .footer{
    height: 10%;
    background-color: #102030;
    color: aliceblue;
}

Are you new to react.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.

send us request