Платформа EXPAND

Appearance

Генератор паролей: первый, в меру сложный, проект на Vue ​

Наша задача на этом проекте не просто воссоздать такой плеер, а и заставить его играть твою любимую музыку:

Необходимая теория по Vue (если коротко) ​

  1. template syntax: вывод JS в HTML
  2. Компоненты: синтаксис
  3. События: v-on
  4. Передача данных между компонентами: emits
  5. Привязка JS к атрибутам: v-bind и v-model

Если сначала захочешь пройтись по Vue, вот полный курс за 60 минут ​

Кстати, пока что это - самый короткий курс на всём YouTube.

Кто у мамы молодец?

Этапы проекта: полный план ​

Этап 1. Ставим себе Vue ​

  1. Установи Vue
  2. Разберись, что значит все файлики в проекте Vue
  3. Разберись, в каком файле ты будешь писать код для проекта (в процессе ковыряния во Vue ты и так это поймёшь, но всё же)

Этап 2. Верстаем генератор паролей ​

  1. Разберись, как подключать библиотеки на проекте Вью (тут будет видео)
  2. Сделай вёрстку проекта. Используй Bootstrap или Bulma для разнообразия и в качестве усложнения (ну а что?)

Этап 3. Делим UI на компоненты ​

С этого дня вёрстку можешь смело называть вёрстку UI (user interface). Ты заслужил это:

  1. Визуально определи главные и второстепенные (зап)части генератора. Зачем? Тебе предстоит разбить свой HTML и CSS на компоненты
  2. Разбей вёрстку на компоненты
  3. Научись вешать события, в том числе и на компоненты
  4. Научись обмениваться данными между дочерними и родительскими компонентами. Этот приём называется emits, хоть я и не исключаю, что проект можно сделать без него (по факту - двумя способами)
  5. Научись использовать v-model для связки элементов форм (в нашем случае - ползунка). Правда, если ты надумаешь сделать ползунок кастомным (не нативным input "type=progress"), тогда v-model не нужен
  6. Научись выводить JavaScript на страницу. Ну, это база вообще - template syntax

Этап 4. Создаём логику генерации пароля ​

  1. Придумай логику создания генерации паролей, исходя из потребностей твоей UI.

Тут думать надо, что я могу сказать. Я всегда тут для помощи, ежели чего 😴

Этап 5. Удобный генератор: серия усложнений ​

  1. Сделай так, чтобы пароль был изначально виден на странице. Да, кнопку "generate" можно убрать. Это правда удобнее + у меня есть следующая задумка (читай дальше)
  2. Сделай так, чтобы при нажатии на любой из 4 рубильников пароль автоматически обновлялся. Ведь, согласись, это удобно. Используй watch или computed. Эту задачу можно решить по-разному
  3. Сделай так, чтобы при нажатии на пароль он сразу копировался в буфер обмена (ссылока для ленивых) 16. Выводи сообщение (модальное окно) о том, что пароль был успешно скопирован. Смотри, как это реализовано на Ван-клике

Этап 6. Празднуем победу ​

Если ты сможешь пройти все этапы (или хотя бы 4 основных), предлагаю отметить это дело бутылкой детского шампанского!

В детстве не разрешали, в юношестве было не до этого. Считаю, что сейчас - самый удачный момент.

До встречи на следующих проектах! Не забывай меня