gistfile1.txt

// Name, email, phone, location, age, picture
// Events listener: click (generate user)

const btnTag = document.querySelector("#generate");

function fetchUser() {
  fetch("https://randomuser.me/api")
    .then((response) => response.json())
    .then((data) => {
      const randomUser = data.results[0];
      displayUser(randomUser);
    });
}

function displayUser(user) {
  const userDOM = document.querySelector("#user");

  userDOM.innerHTML = `
  <div class="flex justify-between">
  <div class="flex">
    <img
      class="w-48 h-48 rounded-full mr-8"
      src="${user.picture.large}"
    />
    <div class="space-y-3">
      <p class="text-xl">
        <span class="font-bold">Name: </span>${user.name.first} ${user.name.last}
      </p>
      <p class="text-xl">
        <span class="font-bold">Email: </span> ${user.email}
      </p>
      <p class="text-xl">
        <span class="font-bold">Phone: </span> ${user.phone}
      </p>
      <p class="text-xl">
        <span class="font-bold">Location: </span> ${user.location.city} ${user.location.country}
      </p>
      <p class="text-xl"><span class="font-bold">Age: </span> ${user.dob.age}</p>
    </div>
  </div>
</div>
  `;
}

fetchUser();

btnTag.addEventListener("click", () => {
  fetchUser();
});