script.js

async function renderUsers(amount = 12) {

    const data = await window.usersData.getRandomUser(amount);
    const users = data?.results || [];
    const container = document.getElementById('cards');
    container.innerHTML = '';

    for (let i = 0; i < users.length; i++) {
      const u = users[i];
      const card = document.createElement('article');
      card.className = 'card';

      const info = document.createElement('div');
      info.className = 'card-info';

      const name = document.createElement('h2');
      name.textContent = `${u.name.first} ${u.name.last}`;

      const dob = document.createElement('p');
      dob.innerHTML = `DOB: ${new Date(u.dob.date).toLocaleDateString()}`;

      const address = document.createElement('p');
      let street = '';
      let city = '';
      let region = '';
      let country = '';
      street = `${u.location.street.number} ${u.location.street.name}`;
      city = u.location.city;
      region = u.location.state;
      country = u.location.country;

      address.innerHTML = `address: ${street}<br>${city} ${region} ${country}`;

      const email = document.createElement('p');
      email.innerHTML = `email: ${u.email}`;

      const phone = document.createElement('p');
      phone.innerHTML = `number: ${u.phone}`;

      info.appendChild(name);
      info.appendChild(dob);
      info.appendChild(address);
      info.appendChild(email);
      info.appendChild(phone);

      const imgsection = document.createElement('div');
      imgsection.className = 'card-image';
      const img = document.createElement('img');
      img.src = (u.picture && u.picture.large) || '';
      img.alt = `${u.name.first} ${u.name.last}`;
      imgsection.appendChild(img);

      card.appendChild(info);
      card.appendChild(imgsection);
      container.appendChild(card);
    }
  
  }

renderUsers();

const amountInput = document.getElementById('amount');
const amountLabel = document.querySelector('.usercount');

function updateAmountLabel() {
  const amount = amountInput.value;
  amountLabel.textContent = `${amount} users`; 
}

amountInput.addEventListener('input', updateAmountLabel);
updateAmountLabel();

document.getElementById('generate').onclick = async () => {
  const amount = parseInt(amountInput.value, 10);
  await renderUsers(amount);
};