0xD34F

const data = Array.prototype.reduce.call(
  document.querySelectorAll('input'),
  (acc, n) => {
    const keys = n.name.match(/\w+/g);
    const key = keys.pop();
    keys.reduce((p, c) => p[c] ??= {}, acc)[key] = n.value;
    return acc;
  },
  {}
);

openItems.forEach(function (formItem) {
  formItem.addEventListener('click', function () {
    openBtn.innerText = this.innerText;
    openList.classList.remove('open');
    hiddenInput.value = this.dataset.value;
  });
});

openList.addEventListener('click', function(e) {
  const item = e.target.closest('li.form-item');
  if (item) {
    openBtn.innerText = item.innerText;
    openList.classList.remove('open');
    hiddenInput.value = item.dataset.value;
  }
});

есть свойство для изменения ее цвета, но если убрать сетку с заднего фона, то это свойство не работает

options: {
  scales: {
    x: {
      grid: {
        display: false,
        borderColor: 'red',
      },
    },
    y: {
      grid: {
        display: false,
        drawBorder: false,
      },
    },
  },
},

const newData = data.map((n, i, a) => ({
  ...n,
  newSick: n.sick - (i < ~-a.length && a[-~i].sick),
}));

data.forEach((n, i, a) => n.newSick = n.sick - (a[i + 1]?.sick ?? 0));
// или
data.reduceRight((prev, n) => (n.newSick = n.sick - prev, n.sick), 0);

const sorted = (arr, key) => arr
  .map(n => [ key(n), n ])
  .sort(([a], [b]) => a < b ? -1 : +(a > b))
  .map(n => n[1]);

const sortedArr = sorted(arr, n => n[0].replace(/^\D+/, ''));

const sortedArr = sorted(arr, n => {
  const d = n[0].match(/\d+/g);
  return +d[0] + +d.at(-1);
});

Как сделать, чтобы третье условие работало?

const rectLeftTop = [ 50, 50 ];
const rectSize = 450;
const step = 15;
let [ x, y ] = rectLeftTop;

setInterval(() => {
  if (rectLeftTop[1] <= y && x === rectLeftTop[0]) {
    y = Math.min(y + step, rectLeftTop[1] + rectSize);
  }

  if (rectLeftTop[0] <= x && y === rectLeftTop[1] + rectSize) {
    x = Math.min(x + step, rectLeftTop[0] + rectSize);
  }

  if (rectLeftTop[1] < y && x === rectLeftTop[0] + rectSize) {
    y = Math.max(y - step, rectLeftTop[1]);
  }

  if (rectLeftTop[0] < x && y === rectLeftTop[1]) {
    x = Math.max(x - step, rectLeftTop[0]);
  }

  block.style.left = `${x}px`;
  block.style.top = `${y}px`;
}, rectSize / step);

const directions = [
  [  0, -1 ],
  [ -1,  0 ],
  [  0,  1 ],
  [  1,  0 ],
];
let iDirection = 0;

const coords = [ 50, 50 ];
const step = 15;
const rectSize = 450;
const rect = [ [...coords], coords.map(n => n + rectSize) ];

(function move() {
  const d = directions[iDirection].map(n => n * step);
  coords.forEach((n, i, a) => a[i] = Math.max(rect[0][i], Math.min(rect[1][i], n + d[i])));

  if (coords.every((n, i) => rect.some(m => m[i] === n))) {
    iDirection = (iDirection + 1) % directions.length;
  }

  block.style.left = `${coords[0]}px`;
  block.style.top = `${coords[1]}px`;

  requestAnimationFrame(move);
})();

.block {
  transition: all 750ms linear;
}

const positions = [
  [  50,  50 ],
  [  50, 500 ],
  [ 500, 500 ],
  [ 500,  50 ],
];
let iPosition = -1;

move();
block.addEventListener('transitionend', move);
setTimeout(move, 0);

function move() {
  iPosition = (iPosition + 1) % positions.length;
  const [ x, y ] = positions[iPosition].map(n => `${n}px`);
  block.style.left = x;
  block.style.top = y;
}

.block {
  animation: move 3s infinite linear;
}

@keyframes move {
  0%, 100% {
    left: 50px;
    top: 50px;
  }
  25% {
    left: 50px;
    top: 500px;
  }
  50% {
    left: 500px;
    top: 500px;
  }
  75% {
    left: 500px;
    top: 50px;
  }
}

<svg viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg" width="550" height="550">
  <rect width="50" height="50" fill="red">
    <animateMotion
      dur="3s"
      repeatCount="indefinite"
      path="M50,50 L50,500 L500,500 L500,50 L50,50 z"
    />
  </rect>
</svg>

$grouped = [];

foreach ($items as $n) {
  $grouped[$n['type']] ??= [
    'type' => $n['type'],
    'typeAmount' => 0,
    'amount' => 0,
  ];

  $grouped[$n['type']]['typeAmount'] += $n['typeAmount'];
  $grouped[$n['type']]['amount'] += $n['amount'];
}

$grouped = array_values($grouped);

V-model="filterPriceFrom"

V-model="filterPriceTo"

props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],

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

:value="параметр" @input="$emit('update:параметр', $event.target.value)"

let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));

const result = arr.map((n, i) => n * matrix.reduce((acc, row) => acc + row[i], 0));

const result = Array(arr.length).fill(0);

for (const row of matrix) {
  for (const [ i, n ] of row.entries()) {
    result[i] += n * arr[i];
  }
}

- document.querySelector('.calculate').addEventListener('click', function () {
+ document.querySelector('form').addEventListener('input', function () {

let select = document.querySelector('select').selectedIndex;
let selectValue = select + 1; // selectedIndex считается с 0, поэтому +1

let dateStart = document.querySelector('.start_date').value;
let dateEnd = document.querySelector('.end_date').value;

let out_3 = document.querySelector('.out_3');

for (let i = dateStart; i <= dateEnd; i = i + 24 * 60 * 60 * 1000) {

document.querySelector('form').addEventListener('input', function() {
  const { elements } = this;
  const data = new FormData(this);
  const keys = [ 'enterDate', 'outDate', 'countRooms', 'prepayment' ];

  const basePayment = 2000;
  const [ enter, out, rooms, prepayment ] = keys.map(k => data.get(k) /* или elements[k].value */);
  const days = enter && out && enter < out
    ? (new Date(out) - new Date(enter)) / (24 * 60 * 60 * 1000)
    : 0;

  elements.payment.textContent = `${basePayment * days * rooms - prepayment} р`;
});

public function expose() {
  return array_map(fn($n) => $n instanceof Text ? $n->expose() : $n, get_object_vars($this));
}

data: () => ({
  items: [ ... ],
  filters: [
    item => item.status === 'hello, world!!',
    item => item.price > 666,
    item => item.text.includes('fuck the world'),
  ],
}),
computed: {
  filteredItems() {
    return this.filters.reduce((items, filterFn) => items.filter(filterFn), this.items);
  },
},

const result = Array.prototype.reduce.call(letter, (acc, n) => (
  (n = soundParts[Number.isNaN(+n) ? 'letter' : 'number'][n]) && acc.push(n),
  acc
), []);

const result = Object
  .entries(Object.assign({}, ...Object.values(soundParts)))
  .reduce((acc, n) => (letter.includes(n[0]) && acc.push(n[1]), acc), []);