1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76

// В одном файле

// Getting gif by url
const getGifUrl = (searchQuery, gifRating) => {
  const fullUrl = `${giphyUrl}${giphyApiKey}&tag=${searchQuery}&rating=${gifRating}`;
  let gifSource;
  let girSourceOriginal;

  fetch(fullUrl).then(response => {
    return response.json();
  }, networkError => {
    console.log(networkError);
  }).then(jsonResponse => {
    if (!jsonResponse)
      gifSource = '';
    else {
      gifSource = jsonResponse.data.images.preview_gif.url;
      gifSoucreOriginal = jsonResponse.data.image_original_url;
    }

    renderGif(gifSource, gifSoucreOriginal);
  });
};

// Где-то в другом файле

// incapsulating image
const incapsulateImage = (gifUrl, gifUrlOriginal) => {
  // creating gif preview tile
  const image = document.createElement('img');
  image.src = gifUrl;

  // create link to the original gif
  const linkOriginal = document.createElement('a');
  linkOriginal.href = gifUrlOriginal;

  // incapsulating gif tile into link
  linkOriginal.appendChild(image);

  // create container-tile
  const tile = document.createElement('div');
  tile.className = "container-tile";

  // incapsulating linked gif into tile
  tile.appendChild(linkOriginal);

  return tile;
}

// Rendering one gif image
const renderGif = (gifUrl, gifUrlOriginal) => {
  if (gifUrl) {
    const imageTile = incapsulateImage(gifUrl, gifUrlOriginal);
    $gifContainer.append(imageTile);
  } else if (!$gifContainer.html()) {
    const notFoundHeading = document.createElement('h1');
    notFoundHeading.innerHTML = NOT_FOUND_TEXT;
    $gifContainer.append(notFoundHeading);
  }
};

const render = () => {
   // Rendering whole block of gifs
  const renderContainer = (searchQuery, gifCount, gifRating) => {
    for (let i = 0; i < gifCount; i++) {
      getGifUrl(searchQuery, gifRating);

      const heading = $gifContainer.find('h1');
      if (heading && heading.text() == NOT_FOUND_TEXT) {
        break;
      }
    }
  }

  // ...Сетап всяких обработчиков событий на элементы...
}