Сергей c0re

Имхо, желательно делать проверку полнее, т.к. ну чисто теоретически такие слова могут быть в имени пользователя например, так же не делать инверсию результата, т.к. метод все же называется isInvalid

isInvalid: function(input) {
  return /@(gmail|yahoo)\.[a-z]+$/.test(input.value.trim().toLowerCase());
}

PS: если проверка НА валидность, то поставить !

Ок, если вам не интересно просто подумать, то примерно так:

function recountItem(el_summ, el_quantity, n_price, e) {
  action = e ? e.target.className.match(/\w+_+(\w+)/)[1] : '';
  n_quantity = parseInt(el_quantity.text());
  switch(action){
    case 'plus':
    case 'increment':
      n_quantity ++;
      break;
    case 'minus':
    case 'decrement':
      n_quantity = n_quantity > 1 ? n_quantity - 1 : n_quantity;
      break;
  }
  el_quantity.text(n_quantity);
  el_summ.text(n_quantity * n_price + ' грн.');
};

//order

$('.order__block').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.order__value'),
      el_summ = $e.find('.order__sum'),
      n_price = $e.find('.order__value').attr('data-number');

  $e.find('.order__plus').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  $e.find('.order__minus').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  recountItem(el_summ, el_quantity, n_price);
});

//single

$('.single__row').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.single__count'),
      el_summ = $e.find('.single__price'),
      n_price = $e.find('.single__count').attr('data-price');

  $e.find('.single__increment').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  $e.find('.single__decrement').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e)
  });

  recountItem(el_summ, el_quantity, n_price);
});

//basket

$('.basket__item').each(function() {
  var $e = $(this),
      el_quantity = $e.find('.basket__value> span'),
      el_summ = $e.find('.basket__sum'),
      n_price = $e.find('.basket__single').text();

  $e.find('.single__increment').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e);
    updateBasketTotalSum();
  });

  $e.find('.single__decrement').click(function(e) {
    recountItem(el_summ, el_quantity, n_price, e);
    updateBasketTotalSum();
  });

  recountItem(el_summ, el_quantity, n_price);
  updateBasketTotalSum();
});

function updateBasketTotalSum() {
  var sum = 0;
  $('.basket__sum').each(function() {
     sum += parseInt($(this).text());
   });
  $('.basket__count').text(sum + ' грн.');
}

$('.basket__close').on('click', function() {
  $(this).parent().parent().remove();
});

если нигде в синтаксисе не ошибся, то должно работать вроде как.

PS: все повторяющиеся действия вынесены в ОДНУ функцию, тем более что у вас во все функции передавались ссылки на html элементы и действия абсолютно одинаковые. А action определяется по className элемента, который берется из event'а

PPS: только какой профит с готового решения??

почитай про события в Javascript
Введение в браузерные события
Выразительный JavaScript: Обработка событий
и т.п.

document.querySelectorAll("button").forEach(el => el.addEventListener("mouseover", e => alert("Вы навели на кнопку: "+e.target.textContent)))

На JQuery как-то так:

$(".shop-options-s > option[class='0']").each(function(){
  $(".container").append(
    $("<span/>").attr({"value":$(this).attr("value")})
                .css("cursor","pointer")
                .text($(this).text())
                .click(function(){
                  $(".shop-options-s").val($(this).attr("value"));
                })
  )
})

$(function(){
  $("button").click(function(){
    var lastInput = $('input[type="datetime-local"]:last');
    var type = lastInput.attr("type");
    var min = lastInput.attr("min") == undefined ? "" : lastInput.attr("min");
    var name = lastInput.attr("name");
    var num = parseInt(name.replace("date",""));
    if (num < 20) {
      $("#container").append('<input type="'+type+'" min="'+min+'" name="date'+(num+1)+'"/>');
    }
    if (num >= 19) {
    	$("button").hide();
    }
  })
})

такое мне кажется все делают по разному, что правильно выбираете сами.
варианты:
1. блок с работами имеет фиксированную высоту с overflow: hidden
при нажатии на кнопку высота блока увеличивается, блок с кнопкой скрывается.
можно это дело анимировать, ну чтоб плавно высота увеличивалась.
2. блок с работами состоит из нескольких блоков, по умолчанию показывается первый, при нажатии на кнопку появляется второй блок (меняем ему display), блок с кнопкой скрывается.
3. добавлять элементы скриптом, через .appendChild(childElement) например:

document.querySelector(".works__more__btn").addEventListener("click", function() {
  var elem = document.createElement("div");
  elem.setAttribute("class", "works__content__smallRow");
  elem.innerHTML = `
                <img src="https://www.placehold.it/375x327/25" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/50" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/75" class="works__content__smallRow__item">
                <img src="https://www.placehold.it/375x327/100" class="works__content__smallRow__item">
`;
  document.querySelector(".works__content").appendChild(elem);
  document.querySelector(".works__more").style.display = "none";
});

как-то так...

UPD:
собственно копирование:

вы правильно сделали cloneNode, но!!!
см. Метод Node.cloneNode()
если вы хотите копировать с дочерними элементами, то необходимо передать параметр "deep" = true

Т.е. вот так:

document.querySelector(".works__more__btn").addEventListener("click", function() {
  document.querySelector(".works__content").appendChild(document.querySelector(".works__content").cloneNode(true));
  document.querySelector(".works__more").style.display = "none";
});

Дело в том что у вас проверка email выполняется только в том случае если не выполняется условие по имени:

if ($('#name').val().length >= 3) {
      $(this).find('#name').css("border", "1px solid rgb(169, 169, 169)");
  } else if ($('#email').val().length > 10 && $('#email').val().search(pattern) == 0) {
    $(this).find('#email').css("border", "1px solid rgb(169, 169, 169)");
  }

else if

надо без else, тогда оба условия будут проверяться независимо.

if ($('#name').val().length >= 3) {
    $(this).find('#name').css("border", "1px solid rgb(169, 169, 169)");
}
if ($('#email').val().length > 10 && $('#email').val().search(pattern) == 0) {
    $(this).find('#email').css("border", "1px solid rgb(169, 169, 169)");
}

и т.д.

см.:
-> document.referrer
-> document.location

-> javascript работа со строками
-> javascript работа с массивами
-> javascript разбор url

ну и например можно вот так:

document.location.href += "&" + document.referrer
                                .split("?")[1]
                                .split("#")[0]
                                .split("&")
                                .filter(str => str.indexOf("utm_") > -1)
                                .join("&");

.split
.filter
.join

Upd:
на случай если у реферера нет параметров, сделать проверку

document.location.href += document.referrer.indexOf("?") > -1 ?
            "&" + document.referrer
            .split("?")[1]
            .split("#")[0]
            .split("&")
            .filter(str => str.indexOf("utm_") > -1)
            .join("&") : "";

было уже - Как сделать возможность скролить блок с помощью мы...

Повторюсь:

draggable scroll

см. статью - JavaScript Scroll by Dragging

Пример

пересечение / совпадение элементов определяется сопоставлением координат углов элементов.
и решение(я) находятся поиском - javascript определить перекрытие элементов

в итого можно написать объект checker с методами проверки collide и inside

var checker = {
  // получить координаты углов объекта
	getRectangle: function (el) {
    return {
      left: el.offsetLeft,
      top: el.offsetTop,
      right: el.offsetLeft + el.offsetWidth,
      bottom: el.offsetTop + el.offsetHeight
    }
  },
  // проверка на пересечение
  collide: function (el1, el2) {
    var rect1 = this.getRectangle(el1);
    var rect2 = this.getRectangle(el2);
    
    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },
  // проверка на совпадение
  inside: function (el1, el2) {
    var rect1 = this.getRectangle(el1);
    var rect2 = this.getRectangle(el2);

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
}

ниже все вместе + некоторые исправления:

https://codepen.io/sazakharov/pen/LYPBmNM?editors=0010

попробуйте
либо в начале JavaScript'a удалить
jQuery(".sp-body.folded").hide();

и/или

в конце JavaScript'a перед последней });
вставить:

jQuery(".sp-head").each(function(){
  $this = jQuery(this);
  $this.addClass("unfolded");
  $this.next().slideDown("fast");
  $this.next().removeClass("folded");
  $this.prop('title', title.folded);
});

UPD:
а, если действие-переключение надо производить по кнопке, то
сделать кнопку, на onclick повесить функцию toggleSpoilers()

добавить в JS в самом конце

var isUnfolded = false;

function toggleSpoilers() {
  jQuery(".sp-head").each(function(){
    $this = jQuery(this);
    if(isUnfolded) {
      $this.removeClass("unfolded");
      $this.next().slideUp("fast");
      $this.next().addClass("folded");
      $this.prop('title', title.unfolded);
    } else {
      $this.addClass("unfolded");
      $this.next().slideDown("fast");
      $this.next().removeClass("folded");
      $this.prop('title', title.folded);
    }
  });
  isUnfolded = !isUnfolded;
}

как-то так...

в API есть метод getElementAtEvent, правда через него можно получить доступ только к элементам графика, см пример, при клике на элемент (точку) можно получить ее значения по осям.

или через helpers вычислять положение клика на канвасе и сопостовлять с положением меток.
см. пример (он правда для radar, для line придется переписать определение положения меток)

см. css свойство transition
Добавьте в стили для .text и .knopka - transition: all 1s;
а вместо display используйте opacity

body {
  background: red;
  padding: 20px;
  font-family: Helvetica;
}

.text {
  margin-bottom : 15%;
  transition: all 1s;
}

.knopka  {
  opacity: 0;
  transition: all 1s;
}

$(".kvadrat").mouseenter(function(){
        $(".knopka").css({
            'opacity' : '1'
        });
        
        $(".text").css({
            'margin-bottom' : '30%'
        });
    });
        
            $(".kvadrat").mouseleave(function(){
        $(".knopka").css({
            'opacity' : '0',
        });
                
        $(".text").css({
            'margin-bottom' : '15%'
        });
    });