Пишем генератор галереи изображений со встроенным слайдером

по порядку:
изображение, по которому кликнули — первый слайд — логично, но пришлось повозиться. Посмотрите на решение, оно далеко не очевидное. Если память мне не изменяет, я получил его методом перебора;
возможность получить готовый код — готовый код можно использовать для готовой галереи и слайдера. Помещаете готовый код в body, добавляете стили, отредактированный скрипт и пользуетесь (что-то типа результата сборки);
попробуйте более рационально использовать видимую область экрана при условии, что, во-первых, мы не знаем размеров и ориентации загружаемых изображений, во-вторых, галерея и слайдер должны одинаково хорошо смотреться на экранах с разным разрешением. Если получится, поделитесь кодом;
что касается исчезновения кода при повторном нажатии getCodeButton, я этого не планировал, но можно переписать эту часть (после else, вместо return):

getCodeButton.addEventListener('click', () => {
    if (document.querySelector('p') == null) {
      // ...
    } else {
      let p = document.querySelector('p')
      document.body.removeChild(p)
    }
})

… и код будет исчезать.
Спасибо за комментарий.