Видеодемонстрация и описание (нажмите на изображение):

Вам необходимо разработать приложение для управления финансами.

Сервис предполагает:

1. Авторизацию/Регистрацию/Выход
2. Создание и удаление счетов
3. Создание и удаление транзакций

У вас уже готова HTML и CSS разметка. Ваша задача - реализация JavaScript-логики.

Выполняйте работу по шагам, описанным в разделе «Основные задачи».

Ориентируйтесь на описание шагов, а также на комментарии в коде каждого файла.

Работа может быть реализована 2-мя способами: с использованием удалённого сервера по адресу "https://bhj-diplom.letsdocode.ru" или развёрнутым локально по адресу "http://localhost:8000". Описание по запуску локального сервера и серверной логики можете найти в файле

Важно! При работе с локальным сервером рабочая директория public/js, при работе с удаленным сервером js

Выполняйте данные задачи по порядку:

1. Разработка API для взаимодействия с Backend
2. Разработка пользовательского интерфейса
   1. Кнопка управления боковой колонкой
   2. Управление окнами
   3. Управление формами
   4. Обработка нажатий на кнопки бокового меню
3. Взаимодействие API с пользовательским интерфейсом
   1. Регистрация
   2. Авторизация
   3. Отображение информации о пользователе
   4. Создание новых счетов
   5. Создание новых транзакций (доход/расход)
   6. Отображение страницы транзакций при выборе счёта

Для удобства работы весь проект разбит на файлы, каждый из которых в конченом счете будет занимать от 5 до 100 строк. В каждом файле содержится только один класс, что упрощает навигацию по проекту.

Для более объемного понимания работы приложения, рекомендуется изучить поведение приложения начиная с файла js/App.js (он уже полностью для вас написан).

• js/
  • api/ (Связь с сервером, сетевые запросы)
    • Account.js (управление счетами)
    • createRequest.js (доработка XHR)
    • Entity.js (Базовый класс для счетов, пользователей и расходов/доходов)
    • Transaction.js (управление доходами и расходами пользователя)
    • User.js (регистрация/авторизация/вход в приложение)
  • ui/
    • forms/ (формы приложения)
      • AsyncForm.js (Базовый класс для всех форм. Используется преимущественно во всплывающих окнах)
      • CreateAccountForm.js (форма создания нового счёта)
      • CreateTransactionForm.js (форма создания нового расхода/дохода)
      • LoginForm.js (форма входа)
      • RegisterForm.js (форма регистрации)
    • pages/ (страницы приложения)
      • TransactionPage.js (страница расходов и доходов конкретного счёта)
    • widgets/
      • AccountsWidget.js (виджет управления счетами)
      • TransactionsWidget.js (виджет управления расходами и доходами)
      • UserWidget.js (виджет текущего пользователя)
    • Modal.js (базовый класс для всех всплывающих окон)
    • Sidebar.js (класс управления боковой колонкой)
  • App.js (класс приложения)

Перейдите по ссылке в repl.it и нажмите кнопку Fork.

Ссылку на доработанный проект предоставьте вашему дипломному руководителю.

Что следует делать, чтобы все получилось:

• Попробовать найти ответ сначала самому в интернете. Ведь, именно это скилл поиска ответов пригодится тебе на первой работе. И только после этого спрашивать дипломного руководителя
• В одном вопросе должна быть заложена одна проблема
• По возможности, прикреплять к вопросу скриншоты и стрелочкой показывать где не получается. Программу для этого можно скачать здесь https://app.prntscr.com/ru/
• По возможности, задавать вопросы в комментариях к коду.
• Начинать работу над дипломом как можно раньше! Чтобы было больше времени на правки.
• Делать диплом по-частям, а не все сразу. Иначе, есть шанс, что нужно будет все переделывать :)

Что следует делать, чтобы ничего не получилось:

• Писать вопросы вида “Ничего не работает. Не запускается. Всё сломалось.”
• Откладывать диплом на потом.
• Ждать ответ на свой вопрос моментально. Дипломные руководители - работающие разработчики, которые занимаются, кроме преподавания, своими проектами. Их время ограничено, поэтому постарайтесь задавать правильные вопросы, чтобы получать быстрые ответы!