const gallery = document.querySelector('#grid-gallery');

fetch('data.json')
  .then((response) => response.json())
  .then((json) => {
    const list = document.createElement('ul');
    let i = 0;
    json.forEach((item) => { 
        ++i;
        let li = document.createElement('li');
        li.style.backgroundImage = `url(img/${item.image}.jpg)`;
        if(item.size){
            li.classList.add(item.size);
        }
        li.style.animationDelay = `${i * 0.1}s`;
        let info = document.createElement('div');
        info.classList.add('info');
        let city = document.createElement('h2');
        city.textContent = item.city;
        let country = document.createElement('h3');
        country.textContent = item.country;
        let citizens = document.createElement('p');
        citizens.textContent = item.citizens;
        info.appendChild(city);
        info.appendChild(country);
        info.appendChild(citizens);
        li.appendChild(info);
        list.appendChild(li);
    });
    gallery.appendChild(list);
  })
  .catch((error) => {
    // handle errors
    console.error('Error fetching JSON:', error);
  });