Виталий Першин

body {
  direction: rtl;
}

querySelectorAll возвращает не элемент, а коллекцию элементов NodeList. Если нужно изменить один элемент, то используйте querySelector. Если много, проходите эти элементы в цикле и добавляйте класс.

Наверное правильнее всего будет оформить как функцию jquery.
Перемешивать любые коллекции можно.

(function($){
$.fn.shuffle = function() {
return this.each(function(){
var items=$(this).children().map(function(){return $(this).contents()}).get();
items.sort(function(){ return 0.5 - Math.random() });
$(this).children().map(function(){$(this).empty().append(items.pop())});
return $(this);
});
}
})(jQuery);


Использовать $('ul').shuffle()

Если текст указывается прямо в html, то переводы должны вставляться в виде специальных символов, а не буквально текстом. Если значение заполняется через js, то там уже так: https://jsfiddle.net/d5fqv0ma/2/

window.addEventListener("load", function(){
  let element = document.querySelector(".loader-screen");
  element.style.opacity = "0";
});

// получаем массив элементов с именем класса 'slider-nav__dot'
var dots = document.getElementsByClassName('slider-nav__dot');

// перебираем в цикле все элементы из массива
for (var i = 0; i < dots.length; i++) {
  // ВНИМАНИЕ!!!!
  // создаем анонимную, само вызывающуюся функцию 
  // в качестве параметра ей передается i
  (function (index) {
    // ВНИМАНИЕ!!!!
    // внутри этой функции переданный ей i уже index. 
    // И если i на всех итерациях это одна и та же переменная с разными значениями
    // то переменная index является самостоятельной переменной, 
    // со своим уникальным значением в каждой итерации цикла 

    // создаем функцию-слушатель события "click"  она существует (ее время жизни) 
    // до тех пор пока не будет удалена из слушателей.
    // Внутри нее используется переменная  index объявленная вовне
    // создавая тем самым ЗАМЫКАНИЕ. То есть для каждой итерации цикла
    // переменная index не будет удалена после завершения итерации
    // а будет продолжать жить как замыкание пока жива функция-слушатель ее использующая
    dots[index].addEventListener("click", function () {
      console.log(index);
    })
  })(i);


}

Проверьте не включена ли случайно «экономия электроэнергии» (SUPER ENERGY SAVING), у меня нименно она вызывает подобный «эффект» (модель правда другая).

Делайте по такому принципу.

Тут

вот делал https://www.agima.ru/projects/tanuki/ посмотрите снизу примерно ваш вариант
обычный slick js + просто мокап с дыркой над слайдером

Ух. Ну как-бы с такой постановкой задачи и не стоит рассчитывать на качественных фрилансеров.

1. Ваша формулировка "Есть два шаблона с TemplateMonster на какой сам сядешь, на какой клиента посадишь нужно добавить в первый функционал из второго", - по сути, если делать нормально это "нарисуйте и сверстайте новый дизайн по мотивам двух предыдущих".
Как бы это работа для 2х разных людей: дизайнера и верстальщика.
По факту они не сочетаются в одном человеке практически никогда.

2. Без обид, но в задаче на fl очень сумбурное изложение - много всякой мелкой конкретики, каких-то специфических требований к валидации и комментированию - но при этом нет в тексте собственно ТЗ на функционал интернет магазина.
"Сделайте как в том шаблоне" - это не ТЗ. "Сделайте как в том шаблоне" - это отправная вводная для не маленькой работы продуктового аналитика, но таких я на фрилансе не встречал ни за какие деньги.

Грамотному исполнителю такая постановка вопроса говорит о том, что у Вас есть какое-то своё видение и либо Вас нужно будет адски брифовать, либо от Вас будет миллион правок.

3. Бюджет.
У меня есть адекватные верстальщики которые быстро и качественно верстают. Стоимость верстки с нуля одной страницы у них начинается с цифры большей, чем Ваш проект целиком (ни разу не хочу Вас обидеть).
Да, у меня завышенные требования и к качеству, и к скорости, - но в любом случае исследование чужого кода с внесением правок задача заведомо более сложная чем сверстать с нуля.

ИТОГО
Если хотите хорошего вменяемого результата, разбейте задачу на две:
1. Нарисовать дизайн по мотивам первого шаблона.
Подробно опишите конкретный список страниц, конкретный функционал, конкретные изменения.
2. Сверстать новый дизайн.

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.