images

const keyImg = 'c9c70ab642fedb925db9bfb33b4f73f1';
const b = document.getElementById('body');
let btn = document.getElementById('btn-search');
let input = document.getElementById('search');
let section = document.getElementById('section');

async function getImg(word) {
  try {
    const url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${keyImg}&tags=${word}&tag_mode=all&extras=url_h&format=json&nojsoncallback=1`;
    const res = await fetch(url);
    const data = await res.json();
    return data;
  } catch (e) {
    console.log(e);
  }
}

document.addEventListener('DOMContentLoaded', async () => {
  btn.addEventListener('click', createElems);
  createElems();
});

async function createElems() {
  try {
    const img = await getImg('belarus2020');
    let imgLength = img.photos.total;

    for (let i = 0; i < imgLength; i++) {
      let img_item = document.createElement('img');
      img_item.classList.add('img-item');
      if (img.photos.photo[i].url_h === undefined) {
        img_item.style.background = `gold`;
      } else {
        img_item.src = `${img.photos.photo[i].url_h}`;
      }

      img_item.alt = `${img.photos.photo[i].title}`;

      section.append(img_item);
    }
  } catch (e) {
    console.log(e);
  }
}


document.addEventListener('DOMContentLoaded', async () => {
  btn.addEventListener('click', createElems());
  createElems();
});

async function createElems() {
  try {
    const img = await getImg('belarus2020');
    let imgLength = img.photos.total;

    for (let i = 0; i < imgLength; i++) {
      let img_item = document.createElement('img');
      img_item.classList.add('img-item');
      if (img.photos.photo[i].url_h === undefined) {
        img_item.style.background = `gold`;
      } else {
        img_item.src = `${img.photos.photo[i].url_h}`;
      }

      img_item.alt = `${img.photos.photo[i].title}`;

      section.append(img_item);
    }
  } catch (e) {
    console.log(e);
  }
}