import React, { useState } from
'react'
;
import
'./style.css'
;
const App = () => {
const [generatedFirstName, setGeneratedFirstName] = useState(
''
);
const [generatedLastName, setGeneratedLastName] = useState(
''
);
const [copied, setCopied] = useState(
false
);
const firstNames = [
'Aarav'
,
'Aditi'
,
'Akshay'
,
'Amit'
,
'Ananya'
,
'Arjun'
,
'Avani'
,
'Bhavya'
,
'Chetan'
,
'Devi'
,
'Divya'
,
'Gaurav'
,
'Isha'
,
'Kiran'
,
'Manoj'
,
'Neha'
,
'Preeti'
,
'Rajesh'
,
'Riya'
,
'Shreya'
,
'Varun'
,
'Saurabh'
,
'Ajay'
,
'Sandip'
,
'Sadan'
,
'Jyoti'
,
'Sapna'
,
'Prem'
];
const lastNames = [
'Agarwal'
,
'Bansal'
,
'Chopra'
,
'Gupta'
,
'Jain'
,
'Kapoor'
,
'Mehta'
,
'Patel'
,
'Rao'
,
'Sharma'
,
'Singh'
,
'Trivedi'
,
'Verma'
,
'Yadav'
];
const generate = () => {
const randomFirstName =
firstNames[Math.floor(Math.random() * firstNames.length)];
const randomLastName =
lastNames[Math.floor(Math.random() * lastNames.length)];
setGeneratedFirstName(randomFirstName);
setGeneratedLastName(randomLastName);
setCopied(
false
);
};
const copy = () => {
const fullName =
`${generatedFirstName} ${generatedLastName}`;
const textField =
document.createElement(
'textarea'
);
textField.innerText = fullName;
document.body.appendChild(textField);
textField.select();
document.execCommand(
'copy'
);
textField.remove();
setCopied(
true
);
};
const changeFirstName = () => {
const randomFirstName =
firstNames[Math.floor(Math.random() * firstNames.length)];
setGeneratedFirstName(randomFirstName);
setCopied(
false
);
};
const changeLastName = () => {
const randomLastName =
lastNames[Math.floor(Math.random() * lastNames.length)];
setGeneratedLastName(randomLastName);
setCopied(
false
);
};
return
(
<div className=
"name-generator-container"
>
<h1>
Random Indian Name Generator
</h1>
<div className=
"buttons-container"
>
<button className=
"generate-button"
onClick={generate}>
Generate Name
</button>
<button className=
"copy-button"
onClick={copy}>
Copy Name
</button>
</div>
{copied && <p className=
"copy-success"
>
Name Copied to Clipboard!
</p>}
<p className=
"generated-name"
>
Generated Name:
{`${generatedFirstName} ${generatedLastName}`}
</p>
<div className=
"buttons-container"
>
<button className=
"change-button"
onClick={changeFirstName}>
Change First Name
</button>
<button className=
"change-button"
onClick={changeLastName}>
Change Last Name
</button>
</div>
</div>
);
};
export
default
App;