HTML code of All Countries Random User Generator
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Random User Generator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.user-info {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.user-info img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.user-info .info {
display: flex;
flex-direction: column;
gap: 5px;
}
.user-info .info span {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Random User Generator</h1>
<div class=”user-info”>
<img id=”user-picture” src=”” alt=”User Picture”>
<div class=”info”>
<span>Name:</span>
<span id=”user-name”></span>
<span>Email:</span>
<span id=”user-email”></span>
<span>Phone:</span>
<span id=”user-phone”></span>
<span>Cell:</span>
<span id=”user-cell”></span>
<span>Address:</span>
<span id=”user-address”></span>
</div>
</div>
<button id=”generate-user”>Generate Now</button>
<script>
const generateUserButton = document.getElementById(‘generate-user’);
const userPicture = document.getElementById(‘user-picture’);
const userName = document.getElementById(‘user-name’);
const userEmail = document.getElementById(‘user-email’);
const userPhone = document.getElementById(‘user-phone’);
const userCell = document.getElementById(‘user-cell’);
const userAddress = document.getElementById(‘user-address’);
generateUserButton.addEventListener(‘click’, async () => {
const response = await fetch(‘https://randomuser.me/api/?inc=picture,name,email,phone,cell,location’);
const data = await response.json();
const user = data.results[0];
userPicture.src = user.picture.large;
userName.textContent = `${user.name.title} ${user.name.first} ${user.name.last}`;
userEmail.textContent = user.email;
userPhone.textContent = user.phone;
userCell.textContent = user.cell;
userAddress.textContent = `${user.location.street.number} ${user.location.street.name}, ${user.location.city}, ${user.location.state}, ${user.location.postcode}`;
});
</script>
</body>
</html>