Создай несложный бот, используя все инструменты, которые вы изучили за фазу 0.
Тебе предстоит создать бота помощника на любую тему, которая тебе интересна (например, как пережить коронавирус и не умереть со скуки, как обучиться js, как приготовить любимое блюдо...). Бот будет отвечать на несколько несложных вопросов. Делай коммиты на каждый новый функционал / исправление, пиши в коммит сообщении что ты в нем воплотил.
С чего же начать проект? Разобьем его на подзадачи / релизы!
Для начала необходимо накидать элементы на страницу. Хотелось бы видеть на сайте:
- Текстовое поле для ввода вопроса
- Кнопку, которая в дальнейшем будет куда-то отправлять текст из поля ввода.
- Блок, в котором будут храниться вопросы и ответы. Таким образом этот блок и будет ботом. Теперь добавь несколько вопросов/ответов с каким-либо текстом. Добавленные элементы нужны для того, чтобы ты мог работать со стилями CSS еще до того, как научишь бота отвечать на вопросы по нажатию на кнопку.
Придумай на сколько стильным будет твой бот и как он будет выглядеть. Можешь подключить css framework, который тебе нравится (например https://bulma.io https://materializecss.com, https://getbootstrap.com/). Помощь в выборе https://2019.stateofcss.com/technologies/css-frameworks.
Сделай так, чтобы все твои элементы располагались по центру по горизонтали и вертикали. Да поможет тебе flex! А может хочешь попробовать grid? Или воспользоваться решением, которое предложено выбранным css framework?
Уже выглядит неплохо, однако на смартфоне всё отображается не так красиво как хотелось бы. Исправь это :)
Пришло время вдохнуть жизнь в твой бот. Навесь событие на кнопку, чтобы содержимое текстового поля по нажатию на кнопку выводилось в консоль.
Создай новый элемент div по клику на ту же кнопку, в него добавляй текст из текстового поля. Затем полученный блок с текстом добавь в бот.
Настало время оживить твой бот. После введения вопроса в текстовое поле и нажатия на кнопку, бот должен ответить что-то плюс-минус логичное. Например: "Чем мне сегодня заняться?" ---> "А ты закончил проект по написанию бота?". Хмм...откуда же берутся ответы? Создаем (пока что хардкодим, пока у нас нет серверной части) массив возможных ответов в js файле.
Напиши функцию, которая принимает два параметра: вопрос и массив ответов, и возвращает ответ в зависимости от слов упомянутых в вопросе. Объединяем все блоки вместе в один проект, проверяем что все работает как было задумано)
Делай пулл реквест и отправляй на проверку!
P.S. gitignore добавлен? Eslint подключен? Никаких лишних файлов и закомментированного кода?