const container = document.querySelector('#picture-container');


fetch('https://randomuser.me/api/?inc=gender,name,picture,dob,email,location,phone&results=1000')
  .then(response => response.json())
  .then(data => {
    data.results.forEach(result => {
        let itemContainer = document.createElement('div');
        itemContainer.classList.add('item-container');

        let person = document.createElement('li');
        let front = document.createElement('div');
        front.classList.add('front');
        

        let pictureImg = document.createElement('img');
        pictureImg.src = result.picture.medium;
        let pictureContainer = document.createElement('div');
        pictureContainer.classList.add('picture-container');
        let name = document.createElement('h3');
        name.textContent = `${result.name.first} ${result.name.last}`;
        let age = document.createElement('p');
        age.textContent = `${result.dob.age} years`;
        let gender = document.createElement('p');
        gender.textContent = result.gender;
        let info = document.createElement('div');
        info.classList.add('info');        
        pictureContainer.appendChild(pictureImg);
        info.appendChild(name);
        info.appendChild(age);
        info.appendChild(gender);        
        front.appendChild(pictureContainer);
        front.appendChild(info);

        let back = document.createElement('div');
        back.classList.add('back');
        let email = document.createElement('p');
        email.textContent = result.email;
        email.classList.add('email');
        let phone = document.createElement('p');
        phone.textContent = result.phone;
        phone.classList.add('phone');
        let location = document.createElement('p');
        location.textContent = `${result.location.street.number} ${result.location.street.name}, ${result.location.city}, ${result.location.state}, ${result.location.country}`;
        location.classList.add('location');
        back.appendChild(email);
        back.appendChild(phone);
        back.appendChild(location);

        itemContainer.appendChild(front);
        itemContainer.appendChild(back);
        person.appendChild(itemContainer);
        container.appendChild(person);
    });
  })
  .catch(error => console.error(error));