Frontend Mentor - Tip calculator app solution

Это решение для челленджа Tip calculator app на Frontend Mentor. Челленджи Frontend Mentor помогают улучшить навыки кодирования, создавая реалистичные проекты.

Содержание

• Обзор
  • Задача
  • Скриншоты
  • Ссылки
• Мой процесс
  • Технологии
  • Что я узнал
  • Дальнейшая разработка
  • Полезные ресурсы
  • Работа с ИИ
• Автор
• Благодарности

Обзор

Задача

Пользователи должны иметь возможность:

• Видеть оптимальную раскладку приложения в зависимости от размера экрана их устройства
• Видеть hover-состояния для всех интерактивных элементов на странице
• Правильно вычислять чаевые и общую сумму на человека

Скриншоты

Desktop	Mobile

Ссылки

• Ссылка на решение: GitHub
• Живой сайт: GitHub Pages

Мой процесс

Технологии

• Семантический HTML5
• CSS-переменные
• Flexbox
• CSS Grid
• Мобильный-first подход
• TypeScript
• Vite

Что я узнал

В процессе работы над этим проектом я закрепил знания:

TypeScript и типизация:

• Типы HTMLInputElement | null для элементов, которые могут отсутствовать в DOM
• Оператор ?. (optional chaining) для безопасного доступа к свойствам
• Приведение типов через as HTMLInputElement при работе с событиями
• Ошибка ts(2779) - нельзя присваивать значение через optional chaining

Нативная реактивность:

• Управление состоянием через переменные (billValue, tipPercent, peopleCount)
• Автоматическое обновление UI при изменении состояния
• Паттерн "состояние → вычисления → отображение"

Работа с событиями:

• Делегирование событий через closest('[data-tip]') для динамических элементов
• Объединение обработчиков в eventBus() для чистоты кода
• События input для отслеживания ввода в реальном времени

// Пример паттерна реактивности
function updateActiveButton(clickedEl: HTMLButtonElement) {
  const tipValue = clickedEl.getAttribute("data-tip");
  if (tipValue) {
    tipPercent = parseInt(tipValue); // обновляем состояние
  }
  setActiveTipButton(tipPercent); // обновляем UI
  writeToInputs(); // пересчитываем значения
  updateResetButton(); // обновляем кнопку
}

Accessibility (ARIA):

• Управление aria-pressed для кнопок-переключателей
• Классы состояний для визуальной и программной доступности

Дальнейшая разработка

• Улучшить обработку ошибок ввода
• Добавить анимации при переключении состояний
• Реализовать сохранение состояния в localStorage

Полезные ресурсы

• MDN Web Docs - Отличная документация по JavaScript и TypeScript
• Vite Documentation - Руководство по сборке проектов

Работа с ИИ

• GitHub Copilot - Помог с рефакторингом кода, выделив функции для управления активными кнопками
• Получены подсказки по работе с TypeScript типами и DOM API
• Проверка кода на ошибки и рекомендации по улучшению

Автор

• GitHub - Faustze

Благодарности

Спасибо Frontend Mentor за отличные челленджи для практики!