Всем привет, сегодня мы с вами снова решаем задачи по HTML и JavaScript с Яндекс Алисой.
Весь интерес таких задач в том, что такие задачи можно очень хорошо и детально настроить, получить задачи на любой вкус и цвет. Можно подобрать тематику, уровень сложности и добавить каких-либо деталей.
Давайте посмотрим, что же у нас будет сегодня...
Генерируем задачу
Сегодня я решил попробовать поменять тематику задач. На этот раз мы не будем писать код с нуля. Наши задачи будут посвящены исправлению ошибок в коде.
Я очень люблю исправлять ошибки в коде. Попрошу Алису сгенерировать такие задачки 😁.
Я попрошу Алису сгенерировать 20 тем, из которых я выберу хорошие задачки.
Сегодня мы решим две задачки, ну а точнее исправим баги в двух проектах 😎.
(Это если представить, включите воображение 😀)
Так звучит более мощно.
Из 20 задач я бы для начала выбрал задачу №5 "Ошибка в валидации формы". Давайте посмотрим, что это.
Генерируем задачу №1
Алиса нам выдала задачу, описала проблему, дала HTML код
CSS и JS. Я попросил её сделать не просто задачу, а сделать её красивой 😁. Если нам повезёт, Алиса сгенерирует нам что-нибудь хорошее.
Так, и мы получаем что-то вот такое...
Не знаю, попрошу Алису перегенерировать стили. Мне это ещё в превью для статьи вставлять...
Стили получаются большими, поэтому их код вставлять не буду (Скриншота 3, даже с маленьким масштабом).
Получается вот такая красота 😀. Вот, а это, как я люблю))
Решаем задачу №1
Алиса говорит, что у нас есть вот такие ошибки. Смотрим...
Смотрим, правда ли, что пароли не сверяются
А что Алиса соврала? Форма то проверяет совпадение паролей, да и сообщения показываются.
Да уж... Пробуем с ней поговорить...
Смотрим...
Вот, то, что нам нужно!!
Не знаю, зачем она расписала баги в комментариях. Ладно, давайте делать задачу...
Так, вот. После разговора с Алисой, задача работает, как надо. Первый баг, который нам надо исправить, сделать так, чтобы пароли сверялись...
Это ещё что такое? Это мы так ошибки проверяем? "if (true)"?
Это самый тупой баг... Но, если подумать, в реальности возможно всё, и реальный разработчик тоже мог бы сделать такую дичь, но только, если он окончательно тронется умом...
Ну а что? Может разработчик оставил на будущее эту проверку и забыл... Не доработал 😁
Ладно, ничего страшного. Давайте дадим нашей Алисе шанс, всё таки это наша нейросеть 😃💪
В начале кода и во всех следующих проверках есть переменная "isValid", которая отвечает за проверку формы.
Попробуем сделать так
Так, а вот здесь начинается интересное.
Здесь уже ошибка по круче (относительно). Переменная должна становиться false, она же и так true изначально, в чём был бы смысл такой проверки?
Вот, теперь лучше
А вот если ввести разные пароли, нас пропускает на сайт
Дело в том, что в конце кода проверки на совпадение паролей вообще нет.
Вот, это уже интереснее, чем "if (true)" 😃.
Мы сравниваем две переменные, "password" и "confirmPassword", которые получают значения из инпутов. А если они не равны, мы подключаемся к элементу текста, который находится над полем со вторым паролем (он пустой) и задаём ему текст "Пароли не совпадают", после чего даём сигнал, что форма проверку не прошла.
Вот 😃
Знаете, так приятно после тяжёлого дня прийти, отдохнуть и порешать простенькие лёгонькие задачки. Это такой кайф, ребята 😃😃😃. Можно расслабиться и дать мозгу лёгкую пищу для размышления.
Продолжаем.
Алиса нам говорит, что наши пароли должны проверяться на наличие цифр. Все остальные пункты мы уже сделали.
А вот здесь я буду использовать регулярные выражения. Регулярные выражения тема очень важная, если вы работаете с валидацией форм, советую ознакомиться и изучить.
Если кто не знал, регулярные выражения это такие шаблоны, по которым вы можете искать совпадения в строках. Вот пример:
[] - диапазон чего-либо
a-z - буквы от a до z
A-Z - буквы от A до Z
0-9 - цифры от 0 до 9
+ - символ сзади + повторяется от 1 раза и более
\. - точка
txt - просто строка "txt"
[] - диапазон
а-яА-Я - диапазон от а до я, от А до Я (ищем только русские буквы)
+ - повторение предыдущего символа от 1 раза и более
\d - любая цифра
Результат: ищем строку, где есть буквы с цифрами.
Нам же нужно регулярное выражение куда проще. Понимаю, можно перебрать строку через цикл и просто проверить. Но эту тему важно изучить, так как она может помочь в более серьёзных задачах, где обычным циклом перебирать будет не просто.
Для проверки будем использовать функцию "test()", которая работает только с регулярными выражениями.
Нужно как-то разделить эти строки.
Мы не можем использовать тег "<br>", так как взаимодействуем с "textContent", а "\n" почему-то не работает. Давайте поступим так. Сообщение об ошибке, что пароль должен содержать цифры, будет выводиться только тогда, когда не были выведены другие ошибки.
Так, это очень хорошо.
Вводим пароль "aaaaaa1"
Всё работает, отлично!!
Генерируем задачу №2
Я выбираю задание №6
Воо!! 😃. Всё в одном стиле.
Да, на этот раз код действительно не работает.
Самое простое - убрать добавление пустых задач
Здесь не было проверки. Добавляем проверку
Пустые задачи добавлять больше нельзя
Не работает кнопка удаления...
А она и не будет работать. В коде сначала вешается обработчик кликов на неё, а потом уже создаются новые карточки. Это не правильно.
После создания карточки, её кнопке нужно вешать новый обработчик кликов.
Вот так вот. Вешаем обработчик кликов при создании объекта.
Теперь нужно сделать так, чтобы список задач обновлялся
У нас уже задан объект с числом в переменную, просто делаем переменную для счёта, увеличиваем её при создании объекта и загружаем.
Вот 😃.
Осталось сделать так, чтобы это всё работало по нажатию Enter.
Вот. Теперь можно сказать, что задача решена 😃
Я только сейчас понял, это не просто минималистичный стиль, который я захотел. Это же стиль Яндекса 😃. Вот Алиса, хитрая...
Подведём итоги
И так, мы решили две задачи. Это было восхитительно, особенно в сравнении с первыми двумя частями данной рубрики.
На этот раз задачи намного меньше по объёму, но при этом очень интересные. Меня это сильно радует.
Алиса сгенерировала две интересные задачи + сделала хорошие для них стили CSS.
Ну а вы, подписывайтесь на канал, ставьте лайки и пишите комментарии 😃. Я вас жду, вообще-то...