Scribd
Upload
3 views

user registrationform using reactjs

Uploaded by

ranof69993
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

user registrationform using reactjs

Uploaded by

ranof69993
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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