Иван Симонов

Мне кажется, тут проблема в коде самой библиотеки, либо какое-то неявное решение.
Я нашел обходной путь.
Можно подписаться на обработчик события валидности поля и в зависимости от этого, выставлять флаги для каждого поля (список событий). Если все поля валидны, то кнопку разблокируем. Это конечно костыль, но всё работает.
https://jsfiddle.net/gsr41b7p/31/

formatDate(date) {
  const today = new Date();
  return [ 'getFullYear', 'getMonth', 'getDate' ].every(n => date[n]() === today[n]())
    ? 'Today'
    : flatpickr.formatDate(date, 'j M');
},

.htaccess

RewriteEngine On
RewriteBase /

ErrorDocument 404 /index.html

Невозможно защитить то —что является публичным. Максимум усложнить процесс реверс инжиниринга. Для "защиты" можно использовать обфускацию.

https://jsfiddle.net/9xqm23yb/

Я не знаю, какая у вас задача, но я так понял, что мячик (объект) - это одна картинка. А раз так, давайте выберем случайную картинку из массива:

const Ball = function (x, y, radius, width, height) {
    ...
    this.ballNum = Math.round(Math.random() * imgBalls.length)

А потом в вашем методе draw не будем перебирать все картинки, а возьмём лишь ту, которую выбрал наш мяч:

Ball.prototype.draw = function (ctx) {
    // for (let i = 0; i < imgBalls.length; i++) {
    img = new Image();
    ballSrc = imgBalls[this.ballNum];
    ...
    // }
};

Прокидываете событие из Header выше, а в App отслеживаете его и дальше обрабатываете как вам нужно
https://codesandbox.io/s/easy-vue-js-search-forked...

TBody в таком случае должен стать дженериком.

type TUserInfo = {
   id: num,
   readonly fname: string,
   readonly lname: string
}

type TBody<T> = {
   success: boolean,
   user?: T
}

И далее по ходу

const fechUserInfo = (): Promise<TBody<TUserInfo>> => {
  return fetch().then(response => response.json()).then((user: TUserInfo) => ({success: true, user}));
}

type TBody<T> = {
   success: boolean;
   user?: T;
}

перебрать все с классом item:
внутри искать span'ы по классам, брать их текст, умножать, складывать.
Попобуйте.

p.s. не попробовали, дождались готового решения. Надеюсь, хоть разберетесь, как работает:

в основном так и есть.
бизнесу насрать на наши модели и архитектуру, ему надо деньги делать и ещё вчера.

если вылизывать архитектуру со старта - никогда не взлетишь. а когда и если взлетишь, поляна будет уже засеяна другими, которые срать–плевали на красоту кода.

это итеративный процесс: сначала столбим делянку как-нибудь (MVP), затем так и живём или приводим её в порядок.

Возможно, но в данном случае классовые компоненты не делают жизнь проще

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          current: 'one'
        };
    }
    render() {
        return (
            <section className="section">
                <Tab value="one" active={this.state.current === 'one'} onClick={() => this.setState({current: 'one'})}>One</Tab>
                <Tab value="two" active={this.state.current === 'two'} onClick={() => this.setState({current: 'two'})}>Two</Tab>
            </section>
        )
    }
}

const openSelector = '[data-target]';
const closeSelector = '.modal__close';
const modalSelector = '.modal';
const activeClass = 'modal--active';

Делегирование, общий обработчик клика назначается один раз для всех:

document.addEventListener('click', ({ target: t }) => {
  const open = t.closest(openSelector);
  if (open) {
    document.querySelector(`#${open.dataset.target}`).classList.add(activeClass);
  } else {
    t.closest(closeSelector)?.closest(modalSelector).classList.remove(activeClass);
  }
});

Отдельные обработчики для кнопок открытия и закрытия, назначаются каждой кнопке индивидуально:

const onClick = (selector, handler) => document
  .querySelectorAll(selector)
  .forEach(n => n.addEventListener('click', handler));

onClick(openSelector, ({ currentTarget: { dataset: { target } } }) => {
  document.querySelector(`#${target}`).classList.add(activeClass);
});

onClick(closeSelector, e => {
  e.currentTarget.closest(modalSelector).classList.remove(activeClass);
});

цифры в анимации подбирал "на глаз", можно сделать и точнее, но лень искать в минифицированном коде какие именно параметры заданы в js.

Привет юный любитель знаний, вот держи.

P.S. Играйся с задержкой, пока не придёшь к нужному тебе результату.

На верстку это никак не влияет. Главное после переноса на основной домен, правильно указать домен в настройках CMS (WP).

. . .
    max = Math.max(...acc);
  }

  return max;

дело в этой части кода.
переменной max присваивается результат нахождения максимального значения из массива acc.
а именно здесь, в массив acc попадают значения:

. . .
acc.push(arr[i][j] * max);

Пространства для оптимизации здесь не сильно много, но например вот так

(function() {

  'use strict';

  const formItems = document.querySelectorAll('.form .form__item');
  const formRadios = formItems.forEach(item => item.querySelectorAll('.form__label'))

  const formProgressLine = document.querySelector('.form .form__progress .form__progress-line');
  const formProgressStart = 100 / formItems.length;
  const result = document.querySelector('.result');

  setTimeout(() => {
    formProgressLine.style.width = `${formProgressStart}%`;
  }, 0);

  formRadios.slice(0, 2).forEach((formRadio, formRadioIndex) => {
    formRadios.forEach(radio => {
      radio.addEventListener('click', () => {
        setTimeout(() => {
          formItems[formRadioIndex].classList.remove('form__item--active');
          formItems[formRadioIndex + 1].classList.add('form__item--active');
        }, 1000);
        formProgressLine.style.width = `${formProgressStart * (formRadioIndex + 2)}%`;
      });
    });
  })

  formRadios[2].forEach(radio => {
    radio.addEventListener('click', () => {
      setTimeout(() => {
        form.style.display = 'none'
        result.classList.add('result--active');
      }, 1000);
    });
  });
})();

const form = document.querySelector('.form');
const items = [...form.querySelectorAll('.form__item')];

form.addEventListener('change', function(e) {
  const index = items.indexOf(e.target.closest('.form__item'));
  form.querySelector('.form__progress-line').style.width = (index + 2) * 100 / items.length + '%';

  setTimeout(() => {
    items[index]?.classList.remove('form__item--active');
    items[index + 1]?.classList.add('form__item--active');

    if (index + 1 === items.length) {
      form.style.display = 'none';
      document.querySelector('.result').classList.add('result--active');
    }
  }, 1000);
});

form.dispatchEvent(new Event('change'));