Ragtime Kitty

Это происходит из-за того, что в Number() передается значение инпута, в котором есть запятая/пробел/другие символы (в зависимости от локали), которые данная регулярка не чистит.

input.addEventListener('input', function() {
  this.value = Number(this.value.replace(/\D/g,'')).toLocaleString('ru');
})

Типа вот так должно быть?

Можете на keydown изменить.

Можно рисовать обе картинки на канвасе. Тут только надо решить откуда берутся сами картинки.

Можно через два keyframes, если не смущает анимация при загрузке.

Он работает правильно, просто у вас линии получаются суб-пиксельными и размазываются встроенным сглаживанием, поэтому линии толще, чем должны быть, а так же цвет искажается.

Добавьте X и Y координатам по половинке пикселя и будут черные линии.

insertAdjacentHTML()
insertAdjacentElement()

Можно делать через сложные формулы смешения цветов, но я не умею в математику и поэтому в вашем случае делала бы это через наложение начального и конечного цветов, а также анимацию уменьшения/увелечения прозрачности.

Опасити легко анимировать от 0 до 1, а визуально такой переход не отличается от стандартной анимации цвета в CSS: https://jsfiddle.net/ce4vno1g/

Достаточно будет менять прозрачность следующего/предыдущего фона в зависимости от прогресса перетаскивания + delay:

Есть еще такой вариант

mix-blend-mode: difference;

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

Появление через обычные @keyframes и forwards
Чтобы перестраивалась шапка, как уже сказали, отслеживайте скролл и добавляйте класс. Там пара строчек. С чем именно трудности?

E.g.

var elements = document.querySelectorAll('#id, tag, .class');

У чекбокса есть два положения: отмечен и не отмечен.
Чтобы сделать разные стили для них, вам даже js не нужен, используйте псевдо-класс :checked.

Ну а если вот прям нужно через скрипты, то проверяйте свойство element.checked, а не стили.

Ну а если по каким-то причинам это не чекбокс, а замаскированный под него блок, то просто переключайте класс через element.classList.toggle();

По нажатию мышки на элементе начинаете отслеживать передвижение курсора, и в зависимости от его положения начинаете двигать блок. При отпускании мышки проверяете, дошёл ли ваш блок до вашего «условного места». Если да - делайте с ним, что душе угодно. Если нет - возвращаете в исходную позицию.

Простенький пример, топорный и на ванильном JS


Ну а можете просто воспользоваться готовым решением типа slick

Вам нужно слушать скролл на странице и передавать положение курсора в вашу функцию. Но т.к. определить координаты курсора при скроле невозможно, вам надо сохранять их и при скроле прибавлять/убавлять размер скрола.

Примерно так, на jquery:

Как организовать точечное применение стиля на конкретной странице?

if (document.location.href === "нужная страница") {
	document.querySelector(".category-sub-menu > li[data-depth='0']:nth-child(12)").style.cssText = "border-bottom: 8px double #630335;";
}

Жесть какая-то, ну это на вашей совести.

Через JS, естессно.

document.querySelector('img').addEventListener('click', function() {
  var links = [];
  [].forEach.call(document.querySelectorAll('.random_link a'), function(el) {
    links.push(el.getAttribute("href"));
  });
  window.location.href = links[Math.floor(Math.random() * links.length)];
});

<input onblur="this.value=''" type="text">

Не могу понять что не так

Ошибка в том, что document.getElementsByClassName возвращает не массив, а коллекцию нодов и перебор через i++ вам тут не поможет, потому что как только вы удаляете элемент, он пропадает и из этой коллекции. Может кто-то другой сможет это точно объяснить, я не очень умная.

Используйте цикл while:

$('#del').click( function () {
  var types = document.getElementsByClassName('active');
  while (types[0]) {
    types[0].remove();
  }
});

А вообще, у вас подключена здоровая jQuery, а вы используете ее только чтобы клик на кнопку навесить. Сделайте все тогда уж на ней: