• Есть наработка одностраничной формы регистрации/атворизации. Её нужно доработать
• Используется библиотека стилей materialize. Рекомендую разобраться в том, как она работает в нашем коде и вообще
• В коде много комментариев, которые стоит прочитать. Там подсказки и доп знания по теме
• Есть участок с демонстрационным кодом. Используюя его и консоль браузера можно быстро и относительно интересно познакомитсья с работой фронтенд приложения
• Три части задач: инфраструктурная + JS + верстка (всё, как в реальных проектах)

• Менеджер пакетов JS: как устанавливать зависимости для проектов => работа со сборкой и деплоем проектов на JS, поддержка зависимостей и разворачивание своих Docker-контейнеров
• Основной синтаксис JS: стрелочные функции, экспортирование объектов, функциональный стиль, модификация DOM дерева, селекторы => продвинутые возможности JS, вход во фреймворки (VueJS, ReactJS)
• Верстка: устройство HTML страницы, импорт из CDN => понимание концепции HTML, умение дебажить элементы и верстать страницы
• Интсрументы: пнаель разработчика в браузере, изменение стилей, консоль => умение дебажить фронтенд код, быстрый просмотр стилей, умение сдавать курсы на openEdu без прохождения тестов

1. Установить менеджер пакетов NodeJS (20 минут+) (инфраструктура) Указания:

•   Необходимо перейти на официальный сайт и скачать последнюю стабильную версию   под вашу ОС
•   После загрузки инсталлятор следует запустить и установить Node.js, как любую другую программу.
•   Убедимся, что всё установилось. Для этого в cmder проверим версию Node. js с помощью команды node -v и npm -v Примечание: Оригинальный гайд Примечание: При установке не убирайте настройку "Добавить в PATH". Иначе консоль не будет видеть ваши обращения к npm

2. Склонировать проект, открыть его в IDE (IntelliJ IDEA, Pycharm, WebStorm, ...), изучить структуру, найти где и что лежит, создать и настроить приватный репозиторий (30 минут+) (инфраструктура)
3. Установить зависимости и открыть index.html (5 минут+) (инфраструктура) Указание: Для установки зависимостей, находясь в корне проекта, выполните в консоле команду npm install
4. Реализовать валидацию пароля на JS (10 минут+) (JS) Указание: Требования валидации собственные, на усмотрение выполняющего Указание: Смотреть пример валидации почты в main.js Прмечание: Если поле невалидно - нужно красить красненьким. Можно использовать класс valid/invalid. Пример есть в демонстрационном блоке кода Прмечание: Не обязательно использовать regexp, но желательно.
5. Реализовать форму авторизации по аналогии с формой регистрации. (30 минут+) (HTML+CSS+JS) Указание: Для добавления функционала лучше использовать селекторы по классу, чтобы не дублировать код
6. Блокировать кнопку регистрации/авторизации пока все поля не станут валидными (20 минут+) (JS+HTML) Указание: используйте функцию getValidationStatus и свойство disabled у HTML-объекта. Если какое-то поле поменялось - оно может перестать быть валидным. Хороший тон сразу уведомить об этом пользователя, а не после нажатия на кнопку отправки формы
7. (*) Адаптировать форму для телефонов, другие изменения в стилях и верстке (CSS) Прмечание: Необязательное творческое задание, позволит набрать за лабу чуть больше баллов.

• Крутой сайт про фронтенд
• Документация библиотеки стилей
• Best practices по формам авторизации (UX)
• Документация пакетного менеджера npm
• Статья про regExp, про regExp в JS

• Почему скрипт main.js нужно импортировтаь в HTML в конце?
• Зачем нужен файл package-lock.json в проекте?

Сделайте свою приватную копию репозитория. Как это сделать, описано тут или тут. Или можно создать чистый репозиторий самостоятельно и залить код туда. Важно, чтобы он был приватным!

Добавьте проверяющего в коллабораторы. GitHub логин: maegv.

Выполните задания, сохраните изменения, сделайте commit и push в свой репозиторий.

Напишите на почту [email protected] письмо с темой вида MiniLab-2 ФИО группа с просьбой проверить работу. В письме должна быть ссылка на репозиторий с выполненной работой, проверяться будет версия, которая лежит в ветке main. Репозиторий должен быть приватным; в ветке main не должно быть файлов и папок с русскими названиями!

Дедлайн: 23:59 26/11/2023 (26 ноября).