Form Part 2

App.jsx

import React, { useState } from 'react';

const App = () => {

const [Name, setName] = useState();

const [Pass, setPass] = useState();

const [seename, seename1] = useState();

const [seepass,seepass1] =useState();

const inputEvent = (event) => {

setName(event.target.value);

};

const inputEvent1 = (event) => {

setPass(event.target.value);

};

const onSubmit = (event) => {

event.preventDefault();

seename1(Name);

seepass1(Pass);

}

return (<>

<div>

<form onSubmit={onSubmit}>

<h1>Hello {seename} {seepass}</h1>

<input type="text" placeholder="Enter your Name" value={Name}

onChange={inputEvent}

/><br />

<input type="text" placeholder="Enter your Password" value={Pass} onChange={inputEvent1} /> <br />

<button type="submit">Click Me</button>

</form>

</div>

</>);

}

export default App;

Css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap');

*{

box-sizing: border-box;

padding: 0;

margin: 0;

font-family: 'Josefin Sans', sans-serif;

}

div{

width: 100%;

height: 100vh;

background: #8e44ad;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

form{

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

h1{

color:white;

background: transparent;

text-shadow: 0 2px 2px black;

}

button{

line-height: 28px;

padding: 0 20px;

background: blueviolet;

color: white;

border: 2px solid #ecf0f1;

outline: none;

border-radius: 5px;

text-transform: uppercase;

cursor: pointer;

}

input{

width:50%;

padding: 10px 20px;

border:none;

outline: none;

margin: 20px 0;

text-align: center;

}

hh