0xD34F

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

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
  .from(letter, n => soundParts[Number.isNaN(+n) ? 'letter' : 'number'][n])
  .filter(Boolean);

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

data(){
  return{
    Item: {
      ...

v-model="item.name"

ADD_TO_PRODUCTS({commit}, item){
    commit('SET_PRODUCT_TO_STATE', item)
},

methods:{
  ...mapActions([
      'ADD_TO_PRODUCTS',
  ]),

@click="ADD_TO_PRODUCTS"

Читая документацию - сложно полностью понять её.

Может ли это означать, что frontend не мое

либо это стандартная ситуация и стоить продолжать?

const groupAdjacent = (arr, newGroup) =>
  arr.reduce((acc, n, i, a) => (
    (!i || newGroup(n, a[~-i])) && acc.push([]),
    acc.at(-1).push(n),
    acc
  ), []);


const result = groupAdjacent(arr, (c, p) => c.name !== p.name);

for (let i in goods) {
  if (discounts.length === 0) {
    count = goods[i].value * goods[i].amount;
  }
  for (let j in discounts) {
    if (goods[i].name === discounts[j].name) {
      count =
        (goods[i].value - goods[i].value * discounts[j].discount) *
        goods[i].amount;
    } else {
      count = goods[i].value * goods[i].amount;
    }
  }
  sum += count;
  console.log(count, goods[i].name);
}

for (const n of goods) {
  let s = n.value * n.amount;
  for (const m of discounts) {
    if (n.name === m.name) {
      s *= 1 - m.discount;
      break;
    }
  }
  sum += s;
}

Возможно есть лучший способ для решения такой задачи.

function totalCost(goods, discounts) {
  discounts = Object.fromEntries(discounts.map(n => [ n.name, 1 - parseFloat(n.discount) / 100 ]));
  return goods.reduce((acc, n) => acc + n.value * n.amount * (discounts[n.name] ?? 1), 0);
}