MERN WORK

NAME-AYUSH KUMAR PANDEY

ROLL NO-2210030077

SECTION-A2

CODE-APP.JS
import React, { useState } from 'react';
import './App.css';

function App() {
const [name, setName] = useState('');
const [collegeName, setCollegeName] = useState('');
const [location, setLocation] = useState('');
const [email, setEmail] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [generatedCard, setGeneratedCard] = useState(false);

const handleGenerateCard = () => {

setGeneratedCard(true);
};

return (
<div className="App">
<div className="input-container">
<label>Enter Name:</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />

<label>Enter College Name:</label>

<input type="text" value={collegeName} onChange={(e) => setCollegeName(e.target.value)}
/>

<label>Enter Location:</label>
<input type="text" value={location} onChange={(e) => setLocation(e.target.value)} />

<label>Enter Email:</label>
<input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />

<label>Enter Phone Number:</label>

<input type="text" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)}
/>
</div>

<button onClick={handleGenerateCard}>Generate Card</button>

{generatedCard && (
<div className="generated-card">
<h2>Generated Card</h2>
<p>Name: {name}</p>
<p>College Name: {collegeName}</p>
<p>Location: {location}</p>
<p>Email: {email}</p>
<p>Phone Number: {phoneNumber}</p>
</div>
)}
</div>
);
}
export default App;
APP.CSS
.App {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 50px;
background-color: #e0e0e0; /* Changed color */
color: #000000; /* Changed color */
}

.input-container {
display: flex;
flex-direction: column;
width: calc(50% - 20px);
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
border: 1px solid #000000; /* Added border */
}

.input-container label {
margin-bottom: 8px;
font-size: 16px;
color: #000000; /* Changed color */
}

.input-container input {
margin-bottom: 16px;
padding: 10px;
border: 1px solid #000000; /* Changed color */
border-radius: 5px;
font-size: 14px;
transition: border-color 0.3s ease;
}

.input-container input:focus {
border-color: #FF6347; /* Changed color */
}

.generated-card {
background-color: #696969; /* Changed color */
padding: 30px;
border-radius: 20px;
width: calc(50% - 20px);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
color: #ffffff;
transition: background-color 0.3s ease;
}

.generated-card:hover {
background-color: #808080; /* Changed color */
}

.generated-card h1 {
color: #ffffff;
margin-bottom: 12px;
 font-size: 24px;
}

.generated-card p {
color: #ffffff; /* Changed color */
font-size: 16px;
line-height: 1.5;
}

.button {
cursor: pointer;
background-color: #FF6347; /* Changed color */
color: #ffffff;
border: none;
padding: 12px 20px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Added shadow */
}

.button:hover {
background-color: #FF4500; /* Changed color */
}

/* New Blue and Red Colors */

.blue-color {
color: #0000FF; /* Blue */
border-color: #0000FF; /* Blue */
}

.red-color {
color: #FF0000; /* Red */
border-color: #FF0000; /* Red */
}

PHOTO-