halloween-gallery/index.html at master · agapas/halloween-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta author='Agnieszka Pas' type='text'>

    <title>Halloween Gallery</title>

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="app">
      <h2 id="header">Happy Halloween !!</h2>
      <div id="content">
        <div id="image-wrapper">
          <img id="image-preview" src="images/1.jpg" alt="Selected image preview" />
          <button id="previous" type="button" onclick="showPreview('previous')" disabled><</button>
          <button id="next" type="button" onclick="showPreview('next')">></button>
        </div>
        <div id="icons-wrapper"></div>
      </div>
      <div id="images-source">Source of images: https://pixabay.com/</div>
    </div>

    <script>
      const imagePreview = document.getElementById('image-preview');
      const iconsWrapper = document.getElementById('icons-wrapper');
      const icons = document.getElementsByClassName('icon');
      const previousButton = document.getElementById('previous');
      const nextButton = document.getElementById('next');

      const updateButtons = (index) => {
        previousButton.disabled = index === 0;
        nextButton.disabled = !!(icons.length && index >= icons.length - 1);
      };

      const showPreview = (buttonId) => {
        const splittedSrc = imagePreview.src.split('images/');
        const currentNumber = parseInt(splittedSrc[1].split('.')[0]);
        const newNumber = buttonId === 'previous'
          ? currentNumber - 1
          : currentNumber + 1;
        imagePreview.src = `${splittedSrc[0]}images/${newNumber}.jpg`;
        updateButtons(newNumber - 1);
      };

      const onIconClick = (number) => {
        const icon = icons[number - 1];
        imagePreview.src = icon.src;
        updateButtons(number - 1);
      };

      for (let i=1; i<=12; i++) {
        let img = document.createElement("img");
        img.id = i;
        img.className = "icon";
        img.src = `images/${i}.jpg`;
        img.alt = `Small image with order number ${i}`;

        img.onclick = function (e) {
          onIconClick(e.target.id);
        }

        iconsWrapper.appendChild(img);
      }
    </script>
  </body>
</html>