Всем привет. Я продолжаю решать задачки по HTML и JavaScript от российских нейронных сетей. В прошлый раз я генерировал задачи с помощью Яндекс Алисы, сегодня я буду использовать ГигаЧат.
Задачи от ИИ по JavaScript и другим языкам программирования довольно интересны. С помощью ИИ их можно сделать любое количество на самые разные темы и детально их настраивать в процессе. Получается достаточно интересно. Мне кажется, придумать можно что угодно.
Сегодня мы посмотрим, как с генерацией задач справляется ГигаЧат, ну и конечно же, будем решать их.
Если кому интересно, вы можете посмотреть мои предыдущие посты про задачки от Алисы. Ну а я начинаю.
Генерируем задачу
Если мне понравится, и Гигачат выдаст реально интересную и качественную задачку, тогда все следующие посты буду писать про задачи от Гигачата.
Так... Наступил этот волнительный момент... Я здесь впервые...
Начинаем...
Ухх... Как же это выглядит... Достаточно стильно и мощно!! А сколько кнопок у Гигачата...
Я им только начал пользоваться, не знаю, как он по функционалу, но чисто визуально выглядит мощно...
Он нам выдал 10 задач на выбор. Мне интересно, что это за табы на странице такие, и что за путаница с контентом 😁?
Я выберу задачу №7 "Табы на странице: путаница с контентом"
Так вот что это за табы такие 😁. Это вкладки.
Смотрим дальше
Я надеюсь, что коды от ГигаЧата будут нормально работать (не работать) 😁. Когда я генерировал задачи на исправление багов с Алисой, она иногда просто выдавала рабочий код без багов, это было неприятно.
Вроде бы неплохо, сейчас посмотрим, как это будет работать...
Да уж... А вот здесь то же самое, что и у Алисы. Наши баги не работают, весь код работает правильно. Попрошу его перегенерировать JS код, но добавить в него ошибок.
Даааа!!! Заработало!! Ой, "занеработало".. Не заработало!! 😈
Вооо, страсти, которые мы заслужили 😈
Нажал на третью вкладку, активировалась вторая, забавно
А знаете что, мне нужны более крутые стили для превью. Попрошу его перегенерировать стили...
Ооо, какая красота!! 😃
Начинаем решать задачу
Решаем задачу
Посмотрим код...
Меня заинтересовал вот этот участок
Если наша вкладка совпадает с выбранной, то она перестаёт быть активной, а те, на которые не кликали, активируются. Неет, мне не нравится такое. Очень простые баги, из которых работают не все.
Перегенерируем JS код
Я попросил Гигачат перегенерировать нам код и добавить ошибки, которые он изначально должен был добавить...
Баги из списка, соответственно тоже поменялись
Та же ошибка, что и у Яндекс Алисы, код стал полностью рабочим. Ну что за дела??
И мне не нравится, что некоторые задачи связаны с утечкой памяти и прочими процессами, скрытыми от пользователей. Мне такое не нравится, баги должны быть заметны.
Ещё раз попрошу сделать его код с багами. Он зачем-то оставил кучу подсказок в коде. Ладно, сейчас я сотру подсказки и покажу код без них
О даа, какой ужас, ничего не работает!! Да, так и надо!!! Урааа!! 😃
Вот теперь можно решать задачу и исправлять в таком коде ошибки.
Начинаем решать задачу (снова)
Так, смотрим новый список багов
Смотрим код.
Я рад, что на этот раз код более простой и влезает в один скриншот 😀
Нужно разобраться, почему открывается несколько вкладок...
Нашёл. Когда мы кликаем по вкладке, из переменной "tabId" загружается значение дата атрибута "data-tab" из выбранной вкладки. Дальше код проверяет все панели с текстом. Если какая-то панель имеет класс, значение которого совпадает с "data-tab", то код эту вкладку закрывает, а остальные открывает. Это странно, должно же быть наоборот.
Вот так должно быть
Теперь вкладки вообще закрылись. Странно...
А давайте вообще посмотрим, что же мы закрыли вообще? Какие атрибуты имеют наши элементы.
Наши кнопки имеют атрибуты "data-tab", равные "1", "2", "3". Эти атрибуты потом сравниваются с классами панелей.
Вот в чём проблема. Они не имеют классов "1", "2", "3". У них тоже атрибуты, только у них атрибут "data-pane". Код неправильно написан.
Мы должны сравнивать дата-атрибут "tab" с дата-атрибутом "pane"
Вот, теперь вкладки перелистываются, но сами кнопки не разукрашиваются...
Конечно, у нас же в конце кода каждый раз вкладки деактивируются. А участка кода, где бы они активировались, нет.
После строки, где деактивируются все кнопки, подключаемся к кнопке с нужным "data-tab" и активируем её, то есть назначаем класс "active".
Получается это вот так
И если честно, я не знаю, где могут быть оставшиеся 3 бага, и вообще могут ли они быть, если всё работает?
Посмотрим список багов
Так уж получилось, что починив два бага, мы починили ещё два бага. Нормально ли такое вообще? Да и если честно, баги какие-то слишком простые.
Последний баг можно тоже вычеркнуть из списка, так как я не понимаю, где вообще зависает и тормозит. Да и код я посмотрел, странных моментов, которые могли бы такое сделать, нет. У меня не тормозит.
Давайте попробуем наш код загрузить в ГигаЧат и попросим сделать один супер мощный баг, который будет очень сложно исправлять.
Писец, он сразу три бага добавил. Но он добавил комментарии. Так, я попытаюсь закрыть глаза и убрать все подсказки 😃
Снова решаем задачу. Новые баги
Вот, что он нам выдал. Здесь есть три сложных бага, как он нам сказал. Я надеюсь, будет интересно...
Хах, это что такое??
Нет, это не нормально. Не нормально. Это что за задача такая?
И по-вашему это сложная задача?
По сути особо что-то не изменилось. Мне не нравятся, так сказать "сложные баги", которые он добавил.
Попробуем ещё раз перегенерировать код.
Вроде всё работает, но зависает.
Вот, что у нас пишет в консоле. Наш новый перегенерированный код теперь может зависать и выводить сообщения о ошибках и зависаниях в консоль. Как мило 😃
А нет.
Ясно, наш ГигаЧат просто сделал таймер и вызвал искусственные зависания кода... Функция выполняется спустя одну секунду, и так она типа зависает...
Хочется выразиться одним современным словом... Ну что за скам?
Гигачат не хочет мне давать нормальные интересные ошибки...
Да уж... Ладно, давайте попробуем какую-нибудь другую задачу
Генерируем задачу 2
Возвращаемся к списку задач
Я выбираю задачу №6: "Слайдер с ошибками"
Внимание, список багов 😃
HTML структура 😃
А вот JS код он снова сгенерировал с подсказками, надоел. Попрошу его убрать.
Только картинок нет.
Да уж, Гигачат вставил ссылки на локальные файлы, а их он нам не дал. Нужно попросить его переделать.
Теперь он дал ссылки на сайты, которые у меня не открываются из за белых списков
Если кто не знал, эту статью я пишу в условиях, где нет никакого интернета, кроме мобильного. Это условия, где интернет ограничен белыми списками, мне не доступно большинство сайтов. Я пишу данную статью используя только то, что есть под рукой. Я использую сервисы из белых списков (Дзен, Гигачат и т.д.). Пишу статью с заблокированным интернетом...
Так сказать, держусь...
Так, я попытался попросить Гигачат дать мне ссылки на картинки из Яндекса, которые у меня работать будут. Он сначала дал мне какие-то ссылки, которые не открывались. Потом он мне дал ссылки на картинки из приватного Яндекс Диска, которые не открывались тоже. А когда я попросил предложить мне картинки из Яндекс Картинок, он сказал, что не может взять их из за авторских прав...
Тогда я сделаю это вручную.
Кстати, я только что понял. Если перейти на Яндекс Картинки, прям на чистый ".../images/", то можно попасть на такую страницу, где можно найти много крутых идей... Я не знал о таком, огоо 😃
Так, я нашёл интересные картинки, вставил, и получилось это. Это баг или это так должно быть...
Эм... что я только что сказал? Так "должно быть" это и есть баг. Как всё сложно и запутано в нашем контексте... 😃 "Это баг или поломка"? ...
В общем, у нас должны быть баги, только правильные 😃. Ну а хотя, какая разница, всё равно исправляем баги))
Так, я нигде не вижу баг "слишком маленький слайдер". Ладно, это будет дополнительный баг для интереса 😀
Начинаем решать задачу №2
Мне нравится такое. Нужно решать задачи не только по JavaScript, но и по HTML и CSS. Здесь ошибка в том, что наши изображения имеют свойство "position: absolute". С этим свойством они могут как бы "летать" над остальными элементами, не сталкиваться с ними и двигаться на любое количество пикселей в любую сторону.
Минус такого свойства в том, что элемент слайдера не подстраивается по высоте под такие картинки. Картинки с "position: absolute" не растягивают слайдер по высоте.
Это свойство можно заменить "position: relative". Картинки также можно будет смещать по "left", но теперь они будут влиять на размеры слайдера.
Гигачат оставил нам много комментариев в CSS 😃
Вот. Только он вышел слишком большой. Нужно задать ограничения...
Теперь влезают все наши картинки целиком, но криво
Выровняю по центру это всё и задам цвет заднего фона
Вот, хорошо
Теперь смотрим список багов
Не знаю, что там с последним слайдом в пункте 1, а когда я перелистал слайды влево, у меня картинки исчезли и слайдер сплющился...
Баг из пункта 3 действительно работает, а остальные баги нет. Что Яндекс Алиса, что Гигачат не могут сгенерировать код с описанными багами. Они только рабочий код сделать могут, а вот задачу на исправление багов, почему-то нет...
Ну в отличии от Алисы, Гигачат после перегенерирования не пишет лишний раз HTML, CSS. В этом плане он чуть умнее. (Кому интересно, можете посмотреть мои предыдущие 5 постов про задачи от Алисы. Не помню, показывал ли я там этот момент...)
Воот, вот это я понимаю, забаганный код
Воот, и кнопка пропала, круглые штучки внизу не листаются (баг №3, баг №5).
Назад слайдер не листается (баг №3). А если обновить его и наоборот назад пролистать, будет это. Вперёд листать больше не можем, а картинки исчезли.
Ну вроде бы все баги на месте, настало время их исправлять.
За переход на слайд отвечает эта функция. В неё загружается переменная curentIndex.
Но эта переменная равна 1, а она используется в массиве. Её начальное значение должно быть 0. Поэтому при запуске мы на втором слайде, а не на первом. (баг №1)
Вот, уже лучше
Смотрим, что у нас здесь.
..........................
Если индекс вышел за "slides.length", то есть за длину массива, то индекс сбрасывается до -1. Так быть не должно.
Во первых, наш последний слайд находится не на индексе "slides.length", а на индексе "slides.length - 1". Например, если бы у нас был массив [1, 2, 3], то последний наш элемент был бы на индексе 2 (длина минус один), а не на 3 (просто длина).
Исправляем.
Также здесь перепутаны индексы, куда мы должны попасть, если вышли за границы слайдера.
Вот так.
Теперь бага с ограничителями для перелистывания нет, но теперь нельзя листать слайдер вообще. Кнопка "вперёд" исчезает, а кнопка "назад" остаётся, но это первый слайд, и листать назад нельзя. (Баг №3)
Здесь у нас достаточно интересная конструкция. Вместо условий у нас вот такая интересная строчка, которая выдаёт либо true, либо false. И они у нас деактивируют кнопки. Только кнопки они деактивируют не те.
Вот так будет правильно
Так, вот, хорошо. Наши слайды листаются.
Так, мы исправили уже 3 бага из 5.
Давайте посмотрим наши кнопки-точки внизу, куда же они пропали?
За наши кнопки-точки отвечают эти элементы.
Наши кнопки-точки записываются в переменную "dots". В коде мы деактивируем "dots", на который переходим. Это очень странно, мы наоборот должны его активировать, при этом деактивировать все остальные "dots".
Я точек этих не вижу, нужно их разукрасить
У меня очень странный баг. Вообще не понимаю, по какому принципу двигаются точки, полный рандом.
Я понял свой косяк. Сначала изменяется index в зависимости от вот таких условий, потом этот index попадает в currentIndex, а потом этот currentIndex должен использоваться, чтобы активировать нужную точку-кнопку.
Вот. Теперь всё исправно работает.
Вот, вроде бы все баги исправили, остался только второй баг. Но его я не вижу, кнопки у меня не "залипают".
Иногда бывает такое, что после исправления одного бага, исправляется и другой баг. Сейчас я смотрю слайдер, всё выглядит хорошо. Мы с задачей справились 😀.
Подведём итоги
Вот и всё, сегодня мы решили две задачи на исправление багов в JS коде от Гигачада. Мы сделали задачу с табами и задачу со слайдером.
Мне очень понравилось. Гигачат, конечно, не всегда правильно всё делает, но с такими задачами он справляется заметно лучше, чем Алиса. С Гигачатом я возился намного меньше.
В целом, мне очень сильно понравилось, теперь только с этим ИИ буду делать задачки и писать посты. Возможно 😃
Ну а если вам понравилось, подписывайтесь на канал и ставьте лайки))