olya_097

1. На CSS, и еще 1 пример, 2-ой пример
2. CSS + SVG

$('.main-header__button').each(function(){
  var btn = $(this);
  btn.off('click').on('click', function(e) {
    btn.parent().find('.main-header__input').trigger('focus');
    btn.parent().find('.main-header__search').addClass('main-header__search-active');
  });
});

Используйте сервис. Там и цвета выберете, и необходимый угол укажите.

А потом просто скопируйте и укажите получившийся background для вашего дива.

https://cssgradient.io/

Вертикально:
background: linear-gradient(red 50%, green 50%);
Горизонтально:

background: linear-gradient(to right, red 50%, green 0px);

Ломается верстка, потому что вы вложили тег <a> в тег <a>. Что приводит к ошибки построения DOM, т. к. это запрещено (ну и весьма логично, кстати, почему это запрещено).

Сделайте так, и ничего не будет ломаться:



Пользуйтесь валидатором в таком случае. Он 99% подскажет вам, куда копать:

const $items = $('.order__desc');
$items.click(function() {
  $('.order__inner').eq($items.index($(this))).show();
});

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

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: только какой профит с готового решения??

Через псевдоэлемент легко что либо добавить. Вот за пару минут накидал, круг двигайте куда угодно черезе top,left и тд.

Html

<div class="circle">
  <h1>
1. Одна
</h1>
<p>
Текст выходить за круг, Текст выходить за круг, Текст выходить за круг
</p>
</div>

Css

.circle{
  width:350px;
  height:350px;
  position:relative;
  padding:50px;
}
.circle h1, .circle p{
  position:relative;
  z-index:1
}
.circle:before{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background: #bfbfbf;
  border-radius:150px;
  z-index:0;
}

Можно задавать высоту псевде в css через переменную.
А из js менять эту переменную.

.theDude{
    --height: 100%;
}
.theDude:before{
	height: var(--height);
}

let el = document.getElementsByClassName('theDude')[0]
el.style.setProperty('--height','200%')

https://codepen.io/origami1024/pen/dyyOoGb

Как вариант - убрать position: relative у .info .info__item:first-child и проставить его для .item:last-child.
Псевдоэлемент будет спозиционирован относительно более далекого предка, и height: 100% сработает. Останется только подправить высоту псевдоэлемента с учетом высоты h3, например, с помощью calc.

Вот пример, далее прямые руки и все норм
https://codepen.io/vbeetlejuice/pen/dRaero

Это не совсем ответ на ваш вопрос, просто упрощенная демонстрация подхода
https://jsfiddle.net/t973546n/2/

Если надо глубже и больше гуглите "jsonschema validate"

Тут вы получаете значение атрибута

var price    = find('.order__value').attr('data-step');

А здесь пытаетесь получить текст, словно бы price содержит элемент, а не значение,
* parseInt(price.text())
отсюда выдается ошибка видимо

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

Регулярка: /^$/

Пример:

var str1 = "";
var str2 = "qwerty";
var re=/^$/;

console.log( re.test(str1) ); // true
console.log( re.test(str2) ); // false

Необходимо показывать скрытый лейбл в зависимости от текущего состояния чекбокса.
Пример: https://jsfiddle.net/vgpkcsqj/

section {
  margin-top: 120px;
}

или

section {
  transform: translateY(120px);
}