- Есть наработка одностраничной формы регистрации/атворизации. Её нужно доработать
- Используется библиотека стилей materialize. Рекомендую разобраться в том, как она работает в нашем коде и вообще
- В коде много комментариев, которые стоит прочитать. Там подсказки и доп знания по теме
- Есть участок с демонстрационным кодом. Используюя его и консоль браузера можно быстро и относительно интересно познакомитсья с работой фронтенд приложения
- Три части задач: инфраструктурная + JS + верстка (всё, как в реальных проектах)
- Менеджер пакетов JS: как устанавливать зависимости для проектов => работа со сборкой и деплоем проектов на JS, поддержка зависимостей и разворачивание своих Docker-контейнеров
- Основной синтаксис JS: стрелочные функции, экспортирование объектов, функциональный стиль, модификация DOM дерева, селекторы => продвинутые возможности JS, вход во фреймворки (VueJS, ReactJS)
- Верстка: устройство HTML страницы, импорт из CDN => понимание концепции HTML, умение дебажить элементы и верстать страницы
- Интсрументы: пнаель разработчика в браузере, изменение стилей, консоль => умение дебажить фронтенд код, быстрый просмотр стилей, умение сдавать курсы на openEdu без прохождения тестов
Указано минимальное время, за которое можно выполнить часть задачи. В жизни, оно может быть умножено на 10
- Установить менеджер пакетов NodeJS (20 минут+) (инфраструктура) Указания:
- Необходимо перейти на официальный сайт и скачать последнюю стабильную версию под вашу ОС
- После загрузки инсталлятор следует запустить и установить Node.js, как любую другую программу.
- Убедимся, что всё установилось. Для этого в cmder проверим версию Node. js с помощью команды node -v и npm -v Примечание: Оригинальный гайд Примечание: При установке не убирайте настройку "Добавить в PATH". Иначе консоль не будет видеть ваши обращения к npm
- Склонировать проект, открыть его в IDE (IntelliJ IDEA, Pycharm, WebStorm, ...), изучить структуру, найти где и что лежит, создать и настроить приватный репозиторий (30 минут+) (инфраструктура)
- Установить зависимости и открыть index.html (5 минут+) (инфраструктура) Указание: Для установки зависимостей, находясь в корне проекта, выполните в консоле команду npm install
- Реализовать валидацию пароля на JS (10 минут+) (JS) Указание: Требования валидации собственные, на усмотрение выполняющего Указание: Смотреть пример валидации почты в main.js Прмечание: Если поле невалидно - нужно красить красненьким. Можно использовать класс valid/invalid. Пример есть в демонстрационном блоке кода Прмечание: Не обязательно использовать regexp, но желательно.
- Реализовать форму авторизации по аналогии с формой регистрации. (30 минут+) (HTML+CSS+JS) Указание: Для добавления функционала лучше использовать селекторы по классу, чтобы не дублировать код
- Блокировать кнопку регистрации/авторизации пока все поля не станут валидными (20 минут+) (JS+HTML) Указание: используйте функцию getValidationStatus и свойство disabled у HTML-объекта. Если какое-то поле поменялось - оно может перестать быть валидным. Хороший тон сразу уведомить об этом пользователя, а не после нажатия на кнопку отправки формы
- (*) Адаптировать форму для телефонов, другие изменения в стилях и верстке (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 ноября).