Finance Tracker Starter Kit

Перед началом работы

Перед запуском проекта на компьютере должны быть установлены:

• Node.js
• npm
• Git

Node.js и npm нужны для установки зависимостей и запуска Vite-проекта, а Git нужен для клонирования репозитория на компьютер.

Как проверить, что всё установлено

Откройте терминал и выполните команды:

Если команды выводят версии, значит всё установлено правильно. Для проектов на Vite нужен установленный Node.js с npm, а запуск локального сервера обычно выполняется через

.

Как получить проект

Сначала нужно склонировать репозиторий с GitHub на свой компьютер. GitHub рекомендует открыть страницу репозитория, скопировать URL и выполнить команду

в терминале.

Пример:

После клонирования нужно перейти в папку проекта через

и работать уже внутри неё.

Установка зависимостей

После того как вы перешли в папку проекта, установите все зависимости командой:

Для Vite-проектов установка зависимостей через

— стандартный шаг перед первым запуском.

Запуск проекта

Чтобы запустить проект в режиме разработки, выполните:

После этого Vite поднимет локальный dev-server и в терминале появится адрес, обычно вида

, по которому можно открыть проект в браузере.

Сборка проекта

Когда работа будет завершена, можно собрать проект командой:

Эта команда создаёт production-сборку проекта, которую потом можно использовать для публикации.

Обзор проекта

В проекте уже подготовлены:

• готовая HTML-разметка;
• готовые стили;
• базовое подключение логики;
• стартовые данные для демонстрации.

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

Структура проекта

Что находится в файлах

• index.html
  — готовая разметка страницы.
• src/style.css
  — готовые стили проекта.
• src/main.js
  — уже подключает интерфейс, форму и рендер.
• src/finance-logic.js
  — основной файл, в котором нужно писать решение.

Что нужно сделать

Ваша основная задача — дописать логику в файле:

В этом файле нужно реализовать 4 функции.

1.

validateTransactionForm(values)

Нужно проверить данные формы:

• заполнено ли название;
• введена ли сумма больше нуля;
• заполнена ли категория.

Функция должна вернуть объект:

или объект с ошибками, если форма заполнена неправильно.

2.

createTransaction(values)

Нужно создать объект новой операции на основе данных формы.

Пример структуры:

3.

filterTransactions(transactions, type)

Нужно реализовать фильтрацию операций:

• если
  type === 'all'
  , вернуть все операции;
• если
  type === 'income'
  , вернуть только доходы;
• если
  type === 'expense'
  , вернуть только расходы.

4.

calculateSummary(transactions)

Нужно посчитать:

• общую сумму доходов;
• общую сумму расходов;
• общий баланс.

Функция должна вернуть объект:

Как работать по шагам

Рекомендуемый порядок работы:

1. Установить Node.js, npm и Git.
2. Склонировать проект с GitHub.
3. Перейти в папку проекта.
4. Выполнить
   npm install
   .
5. Выполнить
   npm run dev
   .
6. Открыть проект в браузере.
7. Перейти в
   src/finance-logic.js
   .
8. Реализовать функции по очереди.
9. Проверять результат после каждого изменения.
10. После завершения выполнить
    npm run build
    .

Дополнительные задания

Когда базовая логика будет готова, можно добавить:

• удаление операции;
• поиск по названию;
• фильтр по категории;
• сохранение данных в
  localStorage
  ;
• сортировку по сумме.

Полезное замечание

Если после запуска команда

не работает, сначала убедитесь, что зависимости были установлены через

npm install

, потому что Vite должен быть установлен в проекте перед запуском dev-сервера.