Here is the complete working code of fake name generator tool. You can use this tool in different websites to generate Names in English and different Country Origin. copy and paste.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fake Name Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
}
.container {
background: #ffffff10;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
margin-bottom: 1rem;
}
.output {
margin: 1rem 0;
padding: 1rem;
background: #ffffff20;
border-radius: 5px;
font-size: 1.2rem;
word-wrap: break-word;
}
button {
background-color: #2575fc;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #6a11cb;
}
select, input {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: none;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Fake Name Generator</h1>
<label for="gender">Select Gender:</label>
<select id="gender">
<option value="any">Any</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label for="region">Select Region:</label>
<select id="region">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<!-- Add more regions as needed -->
</select>
<button onclick="generateName()">Generate Name</button>
<div class="output" id="output">Your fake name will appear here.</div>
</div>
<script>
async function generateName() {
const gender = document.getElementById('gender').value;
const region = document.getElementById('region').value;
try {
const response = await fetch(`https://randomuser.me/api/?gender=${gender}&nat=${region}`);
const data = await response.json();
if (data.results.length > 0) {
const user = data.results[0];
const fullName = `${user.name.first} ${user.name.last}`;
document.getElementById('output').textContent = `Generated Name: ${fullName}`;
} else {
document.getElementById('output').textContent = 'No name could be generated. Please try again.';
}
} catch (error) {
document.getElementById('output').textContent = 'An error occurred. Please try again later.';
}
}
</script>
</body>
</html>