0xD34F

document.querySelector('.animate-all').addEventListener('click', () => {
  document.querySelectorAll('[data-color]').forEach((n, i) => {
    setTimeout(() => {
      n.parentNode.style.backgroundColor = n.dataset.color;
    }, i * 500);
  });
});

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    t.parentNode.style.backgroundColor = color;
  }
});

или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  this.closest('li').style.backgroundColor = this.getAttribute('data-color');
});

const grouped = Object.values(arr.reduce((acc, { title, value: money }) => {
  (acc[title] = acc[title] || { title, data: [] }).data.push({ money });
  return acc;
}, {}));

Делаете функцию полного подсчёта суммы, назначаете её элементам управления в качестве обработчика событий, возникающих при действиях пользователя:

$('#production, #col, .pay, [name="size"]').on('input', recalcPrice);
recalcPrice();

function recalcPrice() {
  const price = [
    $('#production').val(),
    ...$('.pay:checked').get().map(n => n.value),
    $('[name="size"]:checked').val(),
  ].reduce((acc, n) => acc + (n | 0), 0);

  $('#final_price').html(price * ($('#col').val() | 0));
}

const title = document.getElementById('title');
title.innerHTML = Array.from(title.innerText, n => `<span>${n}</span>`).join('');

или

const title = document.querySelector('#title');
title.innerHTML = title.textContent.replace(/./g, '<span>$&</span>');

https://jsfiddle.net/uwjg6qb3/

cards.filter(n => n.tags.some(m => m.tag === tag))

То, что значение i в момент выполнения document.getElementsByClassName("desc")[i]
будет тем же, что и в момент выполнения acc[i].addEventListener есть ни на чём не основанная фантазия, не соответствующая реальности.

Вот если вы объявите i в заголовке цикла с помощью let - тогда да, работать будет.

Но вообще, создавать отдельные обработчики клика для каждой кнопки и обращаться по индексу к элементам .desc нет необходимости. Можно от кликнутой кнопки подняться до .tab-pane и там переключить класс, который изменит видимость .desc:

.active .desc {
  display: block;
}

const itemSelector = '.tab-pane';
const buttonSelector = `${itemSelector} .material_info`;
const activeClass = 'active';

// слушаем клики на кнопках
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.target.closest(itemSelector).classList.toggle(activeClass));

// или, применяем делегирование - назначаем обработчик один раз общему предку кнопок,
// внутри проверяем, где случился клик
document.addEventListener('click', ({ target: t }) => {
  if (t.matches(buttonSelector)) {
    t.closest(itemSelector).classList.toggle(activeClass);
  }
});

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix.push([]);

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

moment.js:

moment(date).format('DD.MM.YYYY')

или

[
  `${date.getDate()}`.padStart(2, 0),
  `${date.getMonth() + 1}`.padStart(2, 0),
  date.getFullYear(),
].join('.')

или

date.toLocaleDateString('ru-RU')

Хочу научиться использовать последние стандарты (ES7, ES8), смотрел их разные фишки, хотелось бы попробовать, но как эти стандарты можно активировать?

Babel вам в помощь.

Видел фишки что то вроде "Точечный синтаксис"
Что-то вроде этого:
console.log ('Привет Мир!');
можно заменить на
c.l.'Привет Мир!'..

Это здесь? С первым апреля вас.

А что, по-вашему это нормально, что функция, использующаяся в качестве обработчика onmessage в основном потоке выполнения, определяется в файле воркера?

UPD. И ещё косяк:

new Worker("PrimeWorker.js");

А вот соответственно и код PrimeWork.js:

Так как всё-таки правильно - PrimeWorker или PrimeWork? Вы уж определитесь.

Функция продолжает работу после инструкции return true

Не-а, не продолжает. Это вам так кажется, из-за рекурсивного вызова. Кстати, его результат тоже надо возвращать, т.е. вместо просто

checkPalindrome(newStr);

должно быть

return checkPalindrome(newStr);

Ну и ещё проверки на пустую строку нет.

constructor({
  container: slider_container = 'container', 
  slides: slides_name = 'slide',
  controls: { state = false, previousAnimation = null, nextAnimation = null } = {}
})

<div class="map" id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

html, body {
  padding: 0;
  margin: 0;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}

let iconIndex = -1;
const icons = [
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Chartreuse-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Azure-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Pink-icon.png'
];

google.maps.event.addDomListener(window, 'load', function() {
  const latlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: latlng,
  });

  const marker = new google.maps.Marker({
    position: latlng,
    map,
  });

  google.maps.event.addListener(marker, 'click', function() {
    iconIndex = (iconIndex + 1) % icons.length;
    marker.setIcon(icons[iconIndex]);
  });
});

const $wrapper = $('.wrapper');
$wrapper
  .children()
  .sort((a, b) => $('p', a).text() - $('p', b).text())
  .appendTo($wrapper);

или

const wrapper = document.querySelector('.wrapper');
wrapper.append(...Array
  .from(wrapper.children, n => [ n, +n.querySelector('p').innerText ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);

$.when($('.item').fadeOut(300)).then(func);

или

$('.item').fadeOut(300).promise().then(func);

document.querySelector('input').addEventListener('input', function() {
  this.value = this.value.toUpperCase();
});

text-transform: uppercase; - не подходит, так как влияет только на отображения, не меняя сами данные

Кстати, подходит. Надо только будет выполнять .toUpperCase() при получении значения input'а.

Проверяйте, что у вас получается при конвертации в число:

const arr = str.split(' ').map(n => isNaN(n) ? n : +n);

Пусть родительский конструктор принимает значения общих свойств и устанавливает их:

function Ship(x, y) {
  this.x = x;
  this.y = y;
}

Вызывайте его в дочерних конструкторах, указывая в качестве контекста текущий экземпляр:

function PlayerShip(x, y) {
  Ship.call(this, x, y);
  this.petrol = 100;
}