Всем привет, сегодня я снова буду решать задачи по JavaScript и HTML от Гигачат, это уже вторая часть.
Мне очень нравится решать задачи от разных ИИ, это достаточно интересный процесс, можно получить много интересных впечатлений и опыта. Задачки от ИИ можно детально настраивать, делать их более интересными конкретно для вас.
Но только вот ИИ далеко не всегда правильно отвечает, и бывает не просто разобраться с ним и получить нормальную задачку.
В прошлый раз я пробовал Алису, теперь пробую Гигачат. В прошлый раз он оказался умнее в плане генерации кода. Сегодня это проверим снова...
Погнали...
Генерируем задачу
Мне хочется решить что-то интересное, что-то сложное, но при этом небольшое. Я решил несколько задач от ИИ, а также пытался несколько решить за кадром, и мне надоели длинные объёмные задачи. Хочется что-то по быстрее, но по интереснее...
Я попробую ему указать, что я веду блог, и мне задачи нужно для блога. Интересно, как он поменяет свои задачи?
Генератор случайных цитат 😁. Не не не, я даже не буду к этому прикасаться. Я представляю, что этот код может нагенерировать....
Мне понравилась задача №2: "Конструктор мини-резюме". Но давайте также посмотрим остальные 5 задач
Задача № 10 "Конструктор цветовых тем" тоже интересная. И задача №7 "Конструктор пиццы/блюда".
Почему-то я каждую статью прошу ИИ заново сгенерировать мне задачу, надо бы воспользоваться предыдущими списками.
Знаете, а на этот раз ИИ хорошо постарался. Вот это реально интересные темы для задач, давайте приступать...
Начинаем решать задачу
Таак...
Интересно...
Ого, дополнительные идеи для усложнения? Даже не знаю... Сейчас особого желания делать это нет, но можно было бы разделить эту задачу на две статьи, где мы форму делаем, и где мы её улучшаем...
Давайте реализовывать...
Так, вроде бы первый пункт сделал...
Выглядит это так...
Срочно надо исправлять это...
Вроде бы нормально... Только нужно добавить заголовок и кнопку
Ну и получается у нас вот такая красота
Пункты 1 и 2 мы выполнили... Очень приятно, когда крупная задача разбита на подзадачи, так приятно осознавать, что ты продвигаешься 😁
Знаете, я хочу по-другому выполнить пункт 3. А если сделать так, чтобы отображалось место, где будет сгенерирован блок? По сути он есть, но только его обводка... Сейчас покажу, что я имею ввиду...
Так, ещё сделаю так, чтобы блоки прижимались к левой и правой стенкам
И получается вот такая красота...
Я думаю, задать им свойство "justify-content: space-around", чтобы их ближе к центру сместить, а отступы "margin" убрать слева и справа.
Вот.
У нас работают стили так. Есть класс "disabled", если он есть, наш блок прозрачный с границей в виде пунктирной линией. Если его нет, то он будет белым. Ну а также нужно вынести отдельно некоторые свойства и сделать его для "resume__result" с любым классом, независимо от "disabled".
Вот. Замечательно!
А теперь нам нужно сделать так, чтобы эта кнопка работала.
Для начала нам нужно сделать так, чтобы эта форма не отправлялась. Для этого устанавливаем обработчик событий на отправку формы и отменяем это событие через "preventDefault()".
Теперь мы можем спокойно всё обработать через JavaScript и вывести информацию на странице.
Получаем значения из формы и записываем их в переменные
После этого создаём строку с HTML, туда добавляем заголовок, теги текста и нашу информацию из формы. Пока я добавлю туда только два поля, чтобы посмотреть, как это будет смотреться.
Также нужно убрать класс "disabled"
Так, нужно подправить стили. Кстати, когда наша форма ещё не активирована, там есть баг с тенью, можете вернуться и посмотреть скриншот.
Мы исправим баг с тенью, поменяем отступы заголовку и сделаем нормальные буквы.
Уже лучше
Теперь добавим остальные 4 поля в HTML
Получается это. Пока не достаточно хорошо. Заголовок побольше сделать надо, а отступы между текстом поменьше.
Надо бы ещё чего-нибудь придумать. Я бы хотел добавить каких-нибудь линий.
Заголовку добавим бордер снизу и "padding-bottom", чтобы этот бордер отодвинуть вниз
И для полей можно сделать такие же чёрточки, только светло-серые и пунктирные.
Вот
Замечательно!!
Теперь давайте проверим форму на каких-то конкретных данных
Так, а вот здесь непорядок... Переносы строки не перенеслись...
В наших "textarea" для переноса строки используется "\n", который не работает при преобразовании в HTML. В HTML роль переноса строки выполняет "<br>"
Вот. Прекрасно!!
Смотрим задание дальше
То есть, получается, после отправки, наша форма должна быть стёрта? А кнопка редактировать должна всё вернуть?
Ладно, давайте сделаем самое простое, пункт 5, кнопка "Очистить". Сразу зададим им функции через атрибуты, чтобы не возиться потом с этим.
Лучше эффект тени уберём из под кнопки.
Две новых кнопки будут стоять в ряд, зададим им ширину 50%.
Самое простое
И да, оно работает, но только оно вызывает наше резюме...
Похоже любое нажатие на кнопку вызывает событие "submit".
Давайте тогда генерацию резюме вынесем в отдельную функцию, дадим эту функцию кнопке
В обработчике "submit" оставим только "preventDefault()", а остальное вынесем в функцию.
Да и, похоже, в отправке придётся очищать форму
Так, а после нажатия на кнопку "очистить" резюме должно исчезнуть... А в "form_clear()" мы не можем засунуть исчезновение резюме, потому что эта функция используется, когда мы его показываем.
Нам нужно ещё функцию сделать.
"form_clear()" - очищение формы
"form_clear_button()" - очищение формы и исчезновение резюме
Вот, очень хорошо, всё работает исправно
Теперь нужно сделать кнопку "Редактировать"
Нам нужно сделать так, чтобы наоборот данные из Резюме попадали в форму.
Нам нужно получить данные, они есть в теге "p", но вместе с ними там также надписи "Фамилия", "Имя" и так далее.
Нужно как-то текст с "Фамилия" отделить от данных. Нашу информацию можно записывать в отдельный тег "span", к которому можно будет потом подключиться и что-то получить.
Теперь пишем код для функции. В наш "input" мы загружаем HTML из текста с классом "resume__result__surname", именно из его элемента "span", после чего заменяем все "br" обратно на "\n".
Ухх
Ну и после всего этого наше резюме (справа) надо отключить
Проверяем
Интересно, но резюме не очистилось
Ошибка
А, я глупо скопировал строчки не глядя. Нужно было очистить HTML. Да и класс "disabled" не убрать, а добавить.
Да, оно перенеслось обратно!! Получилось!!!
И очистить...
Так, мы выполнили все 5 пунктов нашего задания.
А также у нас есть дополнительные пункты, если нам будет интересно.
Этим мы займёмся как-нибудь позже...
Точно, я же в начале писал, что нам нужно скинуть код ему на проверку
Скидываем код на проверку
Я скинул ему код на проверку. У Гигачата есть функция выделять код в сообщении. Жалко, что делает он это криво
Смотрим, что нам ответил Гигачат.
Да, насчёт переменных с элементами согласен. Я в целом согласен насчёт первого пункта.
Насчёт пункта 2. Я не собирался сегодня делать усложнённый код с защитой от всяких атак через форму. Это слишком... Уже вечер, я всё это пишу и сильно вымотался...
Насчёт пункта 3 соглашусь полностью, функцию "form_send" можно было бы разбить на части и сделать проще.
Так, а вот в пункте 4 мне есть, что добавить. Как мы выяснили, onsubmit (событие отправки формы) срабатывает при нажатии на любой button, и здесь "preventDefault()" необходим.
Здесь ещё есть... Эмм... А это зачем ещё надо?
Это тоже верно
Ого. Он сделал защиту от XSS. То есть, он заменяет ковычки от HTML и другие важные символы на их безопасный вариант.
Так, а он хорош, вроде бы... Но он сделал это более красиво и удобно, чем я. Не понимаю, как я забыл про вот такие ковычки ``.
Он сделал валидацию формы. А это разве не в дополнительных пунктах идёт?
Давайте попробуем всё это вставить и проверить, будет ли это работать?
Да уж, а вот здесь наш Гигачат ошибся. Нельзя написать одинарную ковычку в одинарных ковычках, логика вся ломается...
Вот
Так, проверяем...
Да уж... Он забыл написать "preventDefault" и наша форма отправила данные в никуда. Ну, как в никуда... В наш url
Да уж... Гигачат нам понастрочил сколько, а самую базу базу не сделал...
Код от Гигачата по-прежнему не работает
Нет, с меня хватит...
Сегодня мы через Гигачат сгенерировали задачку, решили её, а также проверили на правильность наш код. Вот, всё, что требовалось
Генерировать рабочий код необязательно...
Подведём итоги
Сегодня мы сгенерировали неплохую задачку от Гигачата, решили её и скинули ему на проверку.
Нужно понимать, что эта нейросеть не заточена под написание кода. Какие-то ответы из неё получить на вопросы можно, а вот надеятся на идеальный код не стоит. Всё таки это нейросеть, она не запускает у себя этот код, а просто пишет его наугад по памяти, а это достаточно сложно...
Мне всё равно понравилось работать с Гигачатом, он вносит некоторый интерес в процесс решения задач. Вообще в целом решать задачи по JS от ИИ довольно интересно.
Ну а на этом всё, подписывайтесь на канал и ставьте лайки!! 😁 Всем пока...