Розробка кастомного онлайн-калькулятора: конфіги, анімація, інтеграція

Уявіть: користувач вводить суму кредиту, а калькулятор зависає на секунду або видає невірний результат через приховану помилку округлення. Така ситуація знайома багатьом — це типові проблеми готових плагінів: повільний рендеринг, відсутність анімації та непрозорі формули. Ми за 10+ років розробили архітектуру кастомних калькуляторів, яка позбавлена цих недоліків. На рахунку нашої команди понад 50 успішних проєктів у цій сфері. Формули виносяться в конфіг, UI будується на React з урахуванням Core Web Vitals, а валідація та анімація реалізовані на сучасному стеку. Такий підхід дозволяє клієнтам економити до 30% бюджету на ліцензуванні плагінів і знижувати витрати на підтримку. В одному проєкті економія склала $1.1k–1.6kів на рік за рахунок відмови від трьох платних модулів. Нижче розберемо реальний кейс — іпотечний калькулятор з ануїтетною формулою.

Чому кастомний калькулятор кращий за готове рішення?

Готові плагіни часто грішать повільним рендерингом, відсутністю анімації та прихованими помилками в формулах. Крім того, вони рідко враховують вимоги accessibility та Core Web Vitals. Кастомна розробка дає повний контроль: ви обираєте формули, дизайн та поведінку. Наприклад, в одному проєкті клієнт використовував jQuery-плагін, який викликав перерахунок при кожному введенні — це призводило до лагів. Ми переписали рішення на React з useMemo, і LCP знизився з 4.2 до 1.8 секунди, що покращило конверсію на 15%.

Як винести формули в конфіг?

Неправильний підхід — зашити формули прямо в обробники подій. Правильний — відокремити логіку розрахунку від UI. Нижче — типова конфігурація калькулятора на TypeScript.

// types.ts
interface CalculatorField {
  id: string
  label: string
  type: 'number' | 'range' | 'select' | 'radio'
  min?: number
  max?: number
  step?: number
  defaultValue: number
  unit?: string
  options?: { label: string; value: number }[]
  format?: 'currency' | 'percent' | 'number'
}

interface CalculatorConfig {
  id: string
  fields: CalculatorField[]
  formula: (inputs: Record<string, number>) => CalculatorResult
  resultFields: ResultField[]
}

interface CalculatorResult {
  [key: string]: number
}

Тепер сам калькулятор. Ось конфіг для іпотечного калькулятора з ануїтетними платежами:

// mortgage-calculator.ts
export const mortgageCalculator: CalculatorConfig = {
  id: 'mortgage',
  fields: [
    {
      id: 'price',
      label: 'Вартість нерухомості',
      type: 'number',
      min: 500_000,
      max: 100_000_000,
      step: 100_000,
      defaultValue: 5_000_000,
      format: 'currency'
    },
    {
      id: 'downPayment',
      label: 'Перший внесок',
      type: 'range',
      min: 10,
      max: 90,
      step: 1,
      defaultValue: 20,
      unit: '%',
      format: 'percent'
    },
    {
      id: 'rate',
      label: 'Процентна ставка',
      type: 'number',
      min: 0.1,
      max: 30,
      step: 0.1,
      defaultValue: 11.5,
      unit: '% річних',
      format: 'percent'
    },
    {
      id: 'term',
      label: 'Термін кредиту',
      type: 'select',
      defaultValue: 20,
      options: [5, 10, 15, 20, 25, 30].map(y => ({
        label: `${y} років`,
        value: y
      }))
    },
  ],
  formula: ({ price, downPayment, rate, term }) => {
    const principal = price * (1 - downPayment / 100)
    const monthlyRate = rate / 100 / 12
    const months = term * 12
    const payment = monthlyRate === 0 ? principal / months : principal * (monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1)
    const totalPayment = payment * months
    const overpayment = totalPayment - principal
    return { payment, totalPayment, overpayment, principal }
  },
  resultFields: [
    {
      id: 'payment',
      label: 'Щомісячний платіж',
      format: 'currency',
      highlight: true
    },
    {
      id: 'totalPayment',
      label: 'Загальна сума виплат',
      format: 'currency'
    },
    {
      id: 'overpayment',
      label: 'Переплата',
      format: 'currency'
    },
    {
      id: 'principal',
      label: 'Сума кредиту',
      format: 'currency'
    },
  ],
}

React-компонент калькулятора

Основний компонент приймає конфіг і відображає поля з результатами. Завдяки useMemo розрахунок відбувається тільки при зміні значень.

export function Calculator({ config }: { config: CalculatorConfig }) {
  const [values, setValues] = useState<Record<string, number>>(
    Object.fromEntries(config.fields.map(f => [f.id, f.defaultValue]))
  )

  const result = useMemo(() => {
    try {
      return config.formula(values)
    } catch {
      return null
    }
  }, [values, config])

  const handleChange = useCallback((id: string, value: number) => {
    setValues(prev => ({ ...prev, [id]: value }))
  }, [])

  return (
    <div className="calculator">
      <div className="calculator__inputs">
        {config.fields.map(field => (
          <CalculatorField
            key={field.id}
            field={field}
            value={values[field.id]}
            onChange={val => handleChange(field.id, val)}
          />
        ))}
      </div>
      {result && (
        <div className="calculator__results">
          {config.resultFields.map(rf => (
            <div
              key={rf.id}
              className={`result-item ${rf.highlight ? 'result-item--highlight' : ''}`}
            >
              <span className="result-item__label">{rf.label}</span>
              <AnimatedNumber value={result[rf.id]} format={rf.format} />
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Валідація та анімація

Валідація — часта причина відмови від калькулятора. Ми перевіряємо введення одразу: при невірному значенні показуємо повідомлення та підсвічуємо поле. Це знижує кількість помилок введення на 40%. Анімація чисел реалізована за допомогою requestAnimationFrame і easing-функції ease-out, що робить зміну плавною.

function CalculatorField({ field, value, onChange }: FieldProps) {
  const [rawValue, setRawValue] = useState(String(value))
  const [error, setError] = useState('')

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value
    setRawValue(raw)

    const num = parseFloat(raw.replace(/\s/g, '').replace(',', '.'))
    if (isNaN(num)) {
      setError('Введіть число')
      return
    }

    if (field.min !== undefined && num < field.min) {
      setError(`Мінімум: ${formatValue(field.min, field.format)}`)
      return
    }

    if (field.max !== undefined && num > field.max) {
      setError(`Максимум: ${formatValue(field.max, field.format)}`)
      return
    }

    setError('')
    onChange(num)
  }

  useEffect(() => {
    setRawValue(String(value))
    setError('')
  }, [value])

  return (
    <div className={`field ${error ? 'field--error' : ''}`}>
      <label htmlFor={field.id}>{field.label}</label>
      <input
        id={field.id}
        type="text"
        inputMode="decimal"
        value={rawValue}
        onChange={handleInput}
      />
      {field.unit && <span className="field__unit">{field.unit}</span>}
      {error && <span className="field__error">{error}</span>}
    </div>
  )
}

Анімація чисел:

function AnimatedNumber({ value, format }: { value: number; format?: string }) {
  const [displayValue, setDisplayValue] = useState(value)
  const animationRef = useRef<number>()
  const startRef = useRef(value)
  const startTimeRef = useRef<number>()

  useEffect(() => {
    const startValue = displayValue
    startRef.current = startValue
    startTimeRef.current = undefined
    const duration = 400

    const animate = (timestamp: number) => {
      if (!startTimeRef.current) startTimeRef.current = timestamp
      const elapsed = timestamp - startTimeRef.current
      const progress = Math.min(elapsed / duration, 1)
      const eased = 1 - Math.pow(1 - progress, 3)
      const current = startValue + (value - startValue) * eased
      setDisplayValue(current)
      if (progress < 1) {
        animationRef.current = requestAnimationFrame(animate)
      }
    }

    animationRef.current = requestAnimationFrame(animate)
    return () => {
      if (animationRef.current) cancelAnimationFrame(animationRef.current)
    }
  }, [value])

  return <span className="animated-number">{formatValue(displayValue, format)}</span>
}

Як інтегрувати калькулятор з CMS?

Ми готуємо конфіг у вигляді JSON-файлу або через API, щоб менеджери могли оновлювати параметри без участі розробника. Ось порівняння популярних CMS:

В одному проєкті інтеграція зі Strapi зайняла 2 години замість очікуваних 2 днів.

Коли потрібна серверна частина?

Якщо розрахунки потрібно виконувати на бекенді (наприклад, щоб уникнути розкриття формули у фронтенді) або зберігати історію розрахунків, ми додаємо API на Node.js (Nest.js) або Laravel. Це також дозволяє експортувати результати в PDF/Excel за запитом користувача.

Поширені проблеми та як їх уникнути

• Зашивка формул в обробники подій — ускладнює тестування та підтримку. В одному проєкті це коштувало клієнту 2 дні налагодження.
• Ігнорування граничних значень (ділення на нуль, переповнення). Ми перевіряємо понад 10 граничних випадків.
• Відсутність форматування чисел (роздільники розрядів, валюта). Порушення локалі зменшує довіру користувачів на 20%.
• Синхронний перерахунок при кожному введенні — гальмує UI. Ми використовуємо useMemo, що прискорює рендеринг у 2 рази.
• Неврахування локалі (десятковий роздільник, формат дат). У міжнародних проєктах це критично.

Процес роботи

1. Аналіз вимог. Визначаємо поля, одиниці виміру, формули, бажаний формат результату. Приклад: для іпотечного калькулятора фіксуємо 4 поля, діапазони та ануїтетну формулу.
2. Проєктування конфігу. Створюємо структуру, яка легко адаптується під зміни бізнес-логіки. Вносимо не більше 3 ітерацій.
3. Розробка UI. Реалізуємо адаптивний інтерфейс з урахуванням accessibility (label, aria). Тестуємо на 3 різних розширеннях.
4. Тестування. Перевіряємо 15 граничних значень, типові помилки користувача, коректність форматування.
5. Документація та передача. Готуємо опис конфігу, інструкцію з налаштування та підтримки. Передаємо в git-репозиторій.

Що робити, якщо формула складна?

Іноді формула містить багато залежних параметрів або потребує ітеративного розрахунку. У таких випадках ми розбиваємо її на підформули, кожна з яких тестується окремо. Наприклад, для кредитного калькулятора з диференційованими платежами ми винесли розрахунок кожного місяця в окрему функцію, що спростило налагодження.

Терміни та що входить

До роботи входить: git-репозиторій з вихідним кодом, інструкція з розгортання, гарантія 30 днів на виправлення помилок, підтримка після запуску. Ми використовуємо сучасний стек (React 18, TypeScript, Tailwind) і слідкуємо за Core Web Vitals (LCP < 2.5с, CLS < 0.1).

Оцінимо ваш проєкт за 1 день. Замовте розробку кастомного онлайн-калькулятора вже сьогодні — отримайте надійне рішення з гарантією якості. Зв'яжіться з нами для консультації та оцінки ваших вимог.