intriga93

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

const buttons = document.querySelector('.content');
const blocks = document.querySelector('.wrap');
const dataAttr = 'block';

Считаем:

buttons.addEventListener('click', e => {
  const block = e.target.dataset[dataAttr];
  if (block) {
    console.log(blocks.querySelectorAll(`:scope > [data-${dataAttr}="${block}"]`).length);
  }
});

или

const onClick = ({ target: { attributes: { ['data-' + dataAttr]: { value } } } }) =>
  console.log(Array.prototype.reduce.call(
    blocks.children,
    (acc, n) => acc + (n.getAttribute('data-'.concat(dataAttr)) === value),
    0
  ));

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

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

после 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);

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

Сдвинуть по оси 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)

или

String(value).match(/..?$/)[0]

или

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

или

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

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));

Страница в jsfiddle у вас загружена по https, а ссылки ведут на http. Такой переход сейчас по умолчанию запрещен, и браузер вам об этом даже ошибки выбрасывает в консоль.

И еще, вы слушаете все клики, но корректно обрабатываете только клики по ссылкам. Если кликнуть мимо ссылки - тоже будет ошибка.