intriga93

Где находятся кликаемые элементы; где находятся элементы, которые надо посчитать; каким data-атрибутом задаётся связь между элементами:

const buttons = document.querySelector('.content');
const blocks = document.querySelector('.wrap');
const key = 'block';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

Считаем:

buttons.addEventListener('click', e => {
  const button = e.target.closest(attrSelector);
  if (button) {
    const value = button.dataset[key];
    console.log(blocks.querySelectorAll(`[${attr}="${value}"]`).length);
  }
});

или

const onClick = ({ currentTarget: { attributes: { [attr]: { value } } } }) =>
  console.log(Array.prototype.reduce.call(
    blocks.children,
    (acc, n) => acc + (n.getAttribute(attr) === value),
    0
  ));

for (const n of buttons.children) {
  n.addEventListener('click', onClick);
}

document.querySelectorAll('[data-block="road"]').length;

const listTag = 'ul';
const listClass = 'list';
const itemTag = 'li';
const itemClass = 'item';
const activeClass = 'active';

Вариант раз - перебираем все элементы списка, каждому переключаем класс в зависимости от его равенства кликнутому:

const list = document.createElement(listTag);
const items = arr.map(function(n) {
  const item = document.createElement(itemTag);
  item.textContent = n.text;
  item.classList.add(itemClass);
  item.addEventListener('click', this);
  return item;
}, function() {
  list.style.setProperty('background-image', `url(${arr[items.indexOf(this)].url})`);
  items.forEach(n => n.classList.toggle(activeClass, n === this));
});

list.classList.add(listClass);
list.append(...items);
document.body.append(list);

items[0].click();

Вариант два - ищем внутри списка элемент с классом, удаляем у него класс, добавляем класс кликнутому элементу:

document.body.insertAdjacentHTML('beforeend', `
  <${listTag} class="${listClass}">${arr.map(({ url, text }) => `
    <${itemTag} class="${itemClass}" data-url="${url}">${text}</${itemTag}>`).join``}
  </${listTag}>
`);

const list = document.body.lastElementChild;

list.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(`${itemTag}.${itemClass}`)) {
    list.style.backgroundImage = `url(${t.dataset.url})`;
    list.querySelector(`.${activeClass}`)?.classList.remove(activeClass);
    t.classList.add(activeClass);
  }
});

list.children[0].dispatchEvent(new Event('click', { bubbles: true }));

после url не нужно двоеточие

Вот вариант решения. На проблемную строку указал Дмитрий Беляев.
Помимо сомнительного решения хранить данные в DOM так же дополню:
1) Используйте const по умолчанию, let только если будете менять значение переменной. При этом, если в переменной объект или массив, а Вы меняете свойство объекта или элементы массива, то это тоже const.
2) Не надо обращаться в DOM при вызове функции, чтобы найти там какой-то элемент. Элемент никуда не девается в Вашем случае. Соответственно, элемент лучше найти один раз вне функции, а внутри функции только обращаться к переменной, которая хранит этот элемент. Поиск в DOM одна из самых медленных операций.
3) Не используйте innerHTML без реальной необходимости. textContent в Вашем случае лучше подходит. Так быстрее и безопаснее.

Удивительно.
https://swiperjs.com/api/#parameters
Я смотрю в настройки и вообще не вижу там параметра sliderPerView.

Вы пробовали документацию смотреть?

Свойство slidesPerColumn.

Math.random() - возвращает псевдослучайное число с плавающей запятой из диапазона [0, 1).
Array.prototype.sort() - сортирует массив используя функцию для сравнения. Смотрите описание значений, которые функция должна возвращать.

В данном примере функция сортировка построена так, чтобы генерировать псевдослучайное число в диапазоне [0, 1) - 0.5, т.е. [-0.5, 0.5)

Например, вот так: https://jsfiddle.net/46v0h12e/
Просто наложил поверх общей тени сдвинутую вниз белую непрозрачную тень.

$('.project__col[data-gallery="1"]');

Если нужно с какими-нибудь условиями, то можно попробовать так:

$('.project__col[data-gallery]').filter((i, item) => item.dataset.gallery > 0);

Кого кликаем, кого показываем, какой класс отвечает за показ, через какой атрибут задаётся связь кнопок и блоков:

const buttonOpenSelector = '.project__zoom';
const buttonCloseSelector = '.overlay--close';
const contentSelector = '.overlay--gallery';
const key = 'gallery';
const attr = `data-${key}`;
const activeClass = 'overlay--active';

Вот jquery:

$(document)
  .on('click', buttonOpenSelector, function() {
    $(`${contentSelector}[${attr}="${$(this).data(key)}"]`).addClass(activeClass);
  })
  .on('click', buttonCloseSelector, function(){
    $(this).closest(contentSelector).removeClass(activeClass);
  });

А вот jquery нет:

document.addEventListener('click', ({ target: t }) => {
  t
    .closest(buttonCloseSelector)
    ?.closest(contentSelector)
    .classList
    .remove(activeClass);

  (t = t.closest(buttonOpenSelector)) && document
    .querySelector(`${contentSelector}[${attr}="${t.dataset[key]}"]`)
    .classList
    .add(activeClass);
});

Если я правильно понял, то как-то так:

Сдвинуть по оси Y, это второй параметр :0 0 10px

svgElem.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 50 50')

Или пусть создание элемента выглядит так:

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

g.setAttribute('transform', "rotate(-12, 55, 35)")
?

Проблема в имени переменной top.
Не понимаю почему, но при попытке обращения к ней вызывается не локальная переменная, а window.top, который запрещён из-за кроссдоменности.
Т.е. проблема именно в jsfiddle, с одной стороны, а с другой - то, что вы пытаетесь сделать, легко можно сделать на чистом CSS:

#ball {
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
  }

`${value % 100}`.padStart(2, 0)

или

/..?$/.exec(value)[0]

или

('' + value).replace(/.+(?=..)/, '')

или

String(value).split(/(?=.{2})/).pop()

или

[...''.concat(value)].splice(-2).join('')

https://jsfiddle.net/8qkcupd9/

Чтобы дальше два раза одно и то же не писать, небольшой декоратор:

const processNonEmptyObjectOnly = (f, defaultResult) =>
  data => (
    data = data instanceof Object ? Object.entries(data) : [],
    data.length ? f(data) : defaultResult
  );

Собираем разметку:

const createTreeHTML = processNonEmptyObjectOnly(data => `
  <ul>${data.map(n => `
    <li>
      ${n[0]}
      ${createTreeHTML(n[1])}
    </li>`).join('')}
  </ul>`
, '');


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

Или, создаём элементы напрямую:

const createTreeElement = processNonEmptyObjectOnly(data =>
  data.reduce((ul, n) => (
    ul.append(document.createElement('li')),
    ul.lastChild.append(n[0], createTreeElement(n[1])),
    ul
  ), document.createElement('ul'))
, '');


document.body.append(createTreeElement(data));