0% found this document useful (0 votes)
3 views

user registrationform using reactjs

Uploaded by

ranof69993
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

user registrationform using reactjs

Uploaded by

ranof69993
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Week-8.

Create a Simple Login form using React JS

import "./App.css";

import React, { useState } from "react";

export default function App() {

const [values, setValues] = useState({

firstName: "",

lastName: "",

email: ""

});

const handleInputChange = (event) => {

/* event.persist(); NO LONGER USED IN v.17*/

event.preventDefault();

const { name, value } = event.target;

setValues((values) => ({

...values,

[name]: value

}));

};

const [submitted, setSubmitted] = useState(false);

const [valid, setValid] = useState(false);

const handleSubmit = (e) => {

e.preventDefault();
if (values.firstName && values.lastName && values.email) {

setValid(true);

setSubmitted(true);

};

return (

<div className="form-container">

<form className="register-form" onSubmit={handleSubmit}>

{submitted && valid && (

<div className="success-message">

<h3>

{" "}

Welcome {values.firstName} {values.lastName}{" "}

</h3>

<div> Your registration was successful! </div>

</div>

)}

{!valid && (

<input

class="form-field"

type="text"

placeholder="First Name"

name="firstName"

value={values.firstName}

onChange={handleInputChange}

/>

)}
{submitted && !values.firstName && (

<span id="first-name-error">Please enter a first name</span>

)}

{!valid && (

<input

class="form-field"

type="text"

placeholder="Last Name"

name="lastName"

value={values.lastName}

onChange={handleInputChange}

/>

)}

{submitted && !values.lastName && (

<span id="last-name-error">Please enter a last name</span>

)}

{!valid && (

<input

class="form-field"

type="email"

placeholder="Email"

name="email"

value={values.email}

onChange={handleInputChange}

/>

)}
{submitted && !values.email && (

<span id="email-error">Please enter an email address</span>

)}

{!valid && (

<button class="form-field" type="submit">

Register

</button>

)}

</form>

</div>

);

Index.js file

import { StrictMode } from "react";


import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");


ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);

App.css file

body {
background: #76b852;
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}

.form-container {
width: 360px;
background-color: white;
margin: auto;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
padding: 10px;
}
.register-form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 10px;
}

.success-message {
font-family: "Roboto", sans-serif;
background-color: #3f89f8;
padding: 15px;
color: white;
text-align: center;
}

.form-field {
margin: 10px 0 10px 0;
padding: 15px;
font-size: 16px;
border: 0;
font-family: "Roboto", sans-serif;
}

span {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: red;
margin-bottom: 15px;
}

input {
background: #f2f2f2;
}

.error {
border-style: solid;
border: 2px solid #ffa4a4;
}

button {
background: #4caf50;
color: white;
cursor: pointer;
}

button:disabled {
cursor: default;
}

You might also like