Scribd
Upload
12 views9 pages

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
12 views9 pages

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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy