Mikhail Rerberg

запрос_1()
  .then(результат_1 => Promise
    .all(результат_1.map(запрос_2))
    .then(результат_2 => результат_1.map((значение_1, i) => ({
      значение_1: значение_1,
      значение_2: результат_2[i],
    })))
  )
  .then(console.log)

может вам не круги подойдут
xbsoftware.github.io/enjoyhint

Про тень попробовал https://codepen.io/gracer/pen/yLBePRY
Т.е. смысл элемент с тенью располагать и растягивать с js высчитывая от положения и размеров нужного элемента

Как сделать ссылки с прозрачным фоном?

Canvas либо svg поверх страницы сделай и на нем js`ом рисуй кружочки

С mongo у меня было примерно так:
1) В БД создаётся коллекция, условно, "Категории товаров", где лежат ваши "Товар1", ... со всеми необходимыми параметрами + у каждого свой id, который монга генерирует. Кстати, url-ы тоже тут хранить удобно
2) В коллекции с товарами у каждого товара действительно появляется type , только там лежит id нужного объекта из "Категории товаров"
3) При переходе на страницу "Товар1" на бэкенде в запросе к БД передаются параметры для фильтрации (те же данные из url) . Не надо тянуть такие фильтрации на фронт. Зачем вам получать из БД лишние данные?
4) Фронт просто отображает всё, что пришло с бэка

ИМХО, это наиболее правильное решение, но при желании его можно как угодно упрощать, главная идея - фильтрация должна происходить на уровне БД или бэкенде, но никак не на фронте

У вас есть toggle, но ей мешает то, что вы скрываете текущий кликнутый блок в closeAllPopups.
Вот так правильно https://codepen.io/anon/pen/Rvbyzg

- .popup.visible {
+ .item.visible .popup {

const container = document.querySelector('.container');
const itemSelector = '.item';
const activeClass = 'visible';
const toggleItem = (item, items) =>
  items.forEach(n => n.classList[n === item ? 'toggle' : 'remove'](activeClass));


// делегирование, назначаем обработчик клика один раз для всех item'ов
container.addEventListener('click', function({ target: t }) {
  if (t.matches(itemSelector)) {
    toggleItem(t, this.querySelectorAll(itemSelector));
  }
});

// или, каждому item'у назначаем обработчик клика индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  if (this === t) {
    toggleItem(t, items);
  }
}

if(target.matches('.item')) {
  if (!target.children[0].classList.contains('visible')) {
    closeAllPopups();
  } 
  target.children[0].classList.toggle('visible');
}

1. вы используете селектор .test, а такого селектора у вас в HTML коде нет.
2. событие надо использовать input, так как change срабатывает только когда отпускаешь клавишу мыши.
3. значение input надо приводить к number, так как он возвращает строку. Самый простой способ использовать для этого оператор +:
var p = +$('input').val();
4. вместо классов в таких кейсах удобней использовать метод css
5. несколько условий if друг за другом, проверяющих одно и то же значение, использовать неправильно. Так как если сработало первое условие, следующие тоже будут проверены. Либо используйте в таких случаях связку else if, либо switch case.

if (p === 1) {
  // do something
} else if (p === 2) {
  // do something else        
}

switch(p) {
  case 1:
    // do something
    break;
  case 2:
    // do something else
    break;
}

Исправленный вариант.

Полагаю,что вопрос банален.

Действительно. Так что вот вам вместо ответа ряд наводящих вопросов:

• Значение какого типа возвращает метод val?
  
• А сравниваете вы его со значениями какого типа?
  
• В чём разница между операторами == и ===?
  

Попробуйте сделать на JS сам ползунок и отслеживать его положение, если к примеру он в диапазоне от 0px до 20px от верха ползунка, то нажимается первый кружок пагинации, если от 20px и до 40px то будет активен второй элемент пагинации, при этом саму пагинацию можно сделать прозрачной и убрать в сторону, чтобы это всё работало. И также при прокрутке колеса мыши чтобы ползунок перемещался и вызывалась функция проверки положения ползунка. Возможно не совсем понятно, но надеюсь что это вам как-то поможет.

https://jsfiddle.net/mdsmmy3L/2/

Немного переделал вариант товарища выше на ES6
Стильно, модно. молодежно! (ES6). Без prototype и call и короче

let buttons = document.querySelectorAll('.btn');


buttons.forEach((elem)=>{
	elem.addEventListener('click',()=>{
      elem.parentNode.querySelector('.picture').classList.toggle('active')
  })
})

Вместо img класс лучше переключать у article - максимально дальних не общих предков картинок. Если вдруг захотите при кликах на кнопки стилизовать ещё что-то помимо картинок, или измените взаимное расположение элементов, то не придётся переписывать js-код. Стили, конечно, придётся немного поправить, вместо .active будет .active img.

const container = document.querySelector('.container');
const itemSelector = 'article';
const buttonSelector = `${itemSelector} .btn`;
const activeClass = 'active';

Делегирование, назначаем обработчик один раз:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    button.closest(itemSelector).classList.toggle(activeClass);
  }
});

Или каждой кнопке индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

Или без делегирования.

О Юпитер! Не надо вообще никаких обработчиков!
Обычная html форма с обычной кнопкой сабмита, как в старые добрые 2000-е))
Иными словами снесите вообще js.
А для валидации используйте параметр тега require. Вот и всего делов.
Если нужно, можно также использовать патерны регулярок, на соответствие не только длины, а и шаблону (тел., почта...), в параметре тега pattern.
А onsubmit нужно использовать для более расширенной проверки js-ом перед отправкой формы, или если нужно отправить форму аяксом. Не забудьте при этом отменить стандартное поведение с помощью event.preventDefault();

$("form").on("submit", function(event){
		
		event.preventDefault();
		
		var formData = $("form").serialize();
		
		$.ajax({
			dataType: "html",
			url: "myUrl.php",
			cache: false,
			type: "POST",
			data: formData,
			success: function(msg){
				console.log(msg);
			},
			error:function(jqXHR, textStatus){
				alert(textStatus);
			}
		});
	});