Всем привет. Сегодня я снова нахожусь в условиях ограниченного интернета. Здесь нет wi-fi, а доступен только слабо работающий мобильный интернет с множеством ограничений, установленные белыми списками. Это значит, что большая часть интернета для меня будет заблокирована, а пользоваться можно будет только одобренными сайтами.
Но это вовсе не означает, что я так просто сдамся и не напишу сегодняшнюю статью. Можно использовать одобренные сайты и что-либо написать, даже в условиях почти отключённого интернета.
Для написания этой статьи я буду использовать:
- Яндекс Дзен
- Яндекс Алису
- Visual Studio Code
Никакие ограничения меня не остановят, я буду вести свой блог дальше. Ну а сегодня мы будем решать задачки с Яндекс Алисой 😀. Я решаю задачи и пишу о них статью для блога в условиях ограниченного интернета уже второй раз. 😁
Генерируем задачу
Мне очень сильно понравились задачи на матрицы, ну или задачи на двумерные массивы. Если посмотреть мой блог, у меня таких постов много. (Относительно много 😀)
Как вы могли понять, мне такое очень нравится 😊. И я хочу повторить что-то подобное.
Давайте попытаемся сформулировать промпт для нашей задачи.
В прошлый раз Алиса сгенерировала нам задачу и дала код, который я использовал за основу. Это был HTML со стилями, выглядело неплохо, теперь я хочу то же самое.
Так... Запускаем...
Наша Алиса сгенерировала для нас вот такую задачу
А вот это интересно, такая задача мне нравится. Вкратце, нам нужно сделать генерирующуюся таблицу умножения с задаваемыми размерами.
Как и в прошлый раз, Алиса сгенерировала нам HTML код. Нам не нужно тратить время на то, чтобы написать разметку и стили для неё, Алиса сделала всё за нас. Наша задача написать только JS код, ну и может подправить где нужно HTML.
А также Алиса сгенерировала нам код с решением (я его немножко зацензурирую 😎)
Не знаю, зачем это нужно. Этот код мы смотреть не будем. Если что, код большой, если листать вниз, там много, просто на экран весь не помещается.
Если запустить код от Алисы, получается это. Довольно интересно, но что-то здесь не то.
Градиент поломался. Это потому, что тег "body" не на всю высоту экрана, вот такой баг.
Если присмотреться, окно, которое мы видим в центре страницы, это никакая не таблица, а всплывающее окно, в котором будет отображаться информация о ячейке.
Нам нужно в tableContainer загрузить какую-нибудь таблицу, чтобы посмотреть, как это будет выглядеть.
Но всё же, мне бы хотелось, чтобы Алиса перегенерировала дизайн. Давайте её об этом попросим
Алиса сделала нам новые стили
Ухх... Это что? ...
Как красиво 😃
Как же это круто выглядит. Немножечко 3д
Но всё равно баг небольшой есть, ячейка при анимации обрезается
Но это можно исправить, задав таблице "overflow: visible"
Ну а в целом, Алиса хорошо постаралась. Выглядит очень стильно.
Давайте начинать решать задачу
Начинаем решать задачу
Смотрим условия
Для начала попытаемся сгенерировать таблицу n на n. Просто пустую таблицу без ничего.
Размеры для нашей таблицы задаются вот в такой форме. Точнее это не совсем форма, а просто класс с полями и кнопками.
Давайте сделаем функцию, которая будет обрабатывать нажатие на кнопку, считывать размеры из поля и генерировать таблицу.
Я сделаю HTML код таблицы в виде строки, и при помощи циклов буду добавлять в эту строку элементы.
С помощью цикла добавляем строки с элементами, а потом строку с HTML кодом вставляем в элемент для таблицы.
И получается вот это. Всё работает.
Нам нужно заполнить эти ячейки значениями. Это же таблица умножения.
Пишем код.
Наши строки и столбцы начинают считаться с нуля, поэтому результат наш будет (i + 1) * (j + 1).
Получается вот так
Но у нас есть ошибка. Алиса немного не так сгенерировала код, и когда у нас генерируется большая матрица, например, 10 на 10, наш текст и кнопки уезжают за пределы экрана.
В нашем "body" было задано свойство "align-items: center". Алиса немного начудила, это странно... Но с другой стороны, это добавляет задаче интерес, нам нужно теперь фиксить баги
Смотрим. Нам нужно сгенерировать таблицу от 2 до 20 ячеек.
И при этом у нас в ширину отображается только 16
Остальное же уезжает
Зададим нашему контейнеру ширину 100%, а свойство "max-width" уберём.
Вот. Теперь можно считать, что пункт 1 выполнен.
Смотрим, что нужно сделать дальше
Оказывается, я сделал пункт 2, но не заметил этого 😁
Теперь нам нужно посчитать сумму строк и сумму столбцов.
Делаем переменную, которая будет складывать получившиеся произведения. Потом в конце таблицы создадим колонку, куда будем вставлять результаты этой переменной
И раз на то пошло, нужно как-то обозначить эти колонки. Например: 1, 2, 3, sum. Используем теги "th" (table head), это ячейки, используемые в верхушке таблицы. Алиса специально для "th" подготовила стили.
Ого, ваау!! Получается вот такая красота 😁😀
Теперь нужно сделать сумму для колонок. Придётся делать отдельный цикл.
Здесь можно использовать похожий код.
Ну и стоило бы слева пометить так же числа и sum
Нужно немного сместить синие ячейки
Добавим в начале лишнюю ячейку
Вот. Это замечательно!! 😀😁
Осталось сделать эти два пункта
Давайте сделаем самое простое, а именно добавим функционал кнопке "перегенерировать".
Стоит вынести код для генерации таблицы в отдельную функцию, чтобы его можно было использовать для другой кнопки.
Генерируем случайное число от 2 до 20 и вставляем его в функцию
Наша кнопка работает
Теперь нам осталось выполнить 5-ый пункт, сделать подсказку при наведении курсора на ячейку.
У нас уже есть готовая подсказка, но её нужно переделать
Нужно поменять этому окну стили. Задать "position: absolute" и уменьшить шрифт
Лучше скрыть это окно через атрибут "hidden"
Сделаем так, чтобы при наведении мышки на ячейки, что-то выводилось. Например, данные об этом событии.
Так, и нам не выводится ничего. Я понял, дело в том, что сначала мы пытаемся навесить обработчик событий ячейкам, а потом их генерируем.
Обработчик события "mousemove" нужно вешать в функции, где генерируется таблица.
Если честно, я не помню, как получить координаты мыши, поэтому и вывел все свойства "mousemove" в консоль. Теперь всё выводится, и я вспомнил, как это называется.
Нам нужен "clientX" и "clientY"
Делаем событие mousemove (движение мышью), чтобы задавать координаты окна, mouseover (мышь зашла в ячейку) для появления окна, mouseout (мышь вышла из ячейки), для скрытия окна.
Окно появляется нормально, но съезжает при прокрутке окна. Нам нужно использовать другие свойства для получения координат.
Я попробовал снова вывести информацию о событии "mousemove" в консоль и нашёл вот такое свойство. PageX и PageY, судя по названию и значениям это то, что нам нужно. Это координаты не относительно экрана, а относительно сайта.
Теперь даже при прокрутке окно показывается нормально. Теперь нужно добавить значения в это окно.
Чтобы это сделать, в наши ячейки должны быть добавлены эти данные. Нужно добавить туда значение по строке, по столбцу, сумму строки и сумму столбца.
Я думаю, если один раз посчитать все эти данные и забить в ячейку, это будет более эффективно, чем каким-то образом перерасчитывать всё при открытии окна, при этом не добавляя дополнительных данных в ячейку.
Давайте попробуем это реализовать.
Добавить значения из строки и колонки (два множителя) можно сразу при генерации. Это будет сделать удобно, потому что наши i и j у нас под рукой.
А суммы из последней строки или из последнего столбца можно будет получать при открытии окна, при помощи полученных i и j. Иначе нам придётся делать цикл, который ещё раз будет проходиться по ячейкам и записывать, а это лишнее.
Так, смотрим, что за что у нас здесь отвечает...
Для начала зададим значения трём параметрам окна. Их мы получаем из дата атрибутов "x", "y", а также из текстового значения ячейки.
Получается так
Теперь нам нужно как-то получить эту сумму по строке.
Думаем, как это можно сделать. У нас есть x и y. А также есть таблицы со строками. Мы можем обратиться к элементу "tbody" и получить массив ссылок на дочерние элементы.
При помощи y мы можем получить нужную строчку и получить самый последний элемент с sum. У нас массив начинается с 0, а строки с результатами начинаются со 2 строки, то есть в таком массиве эта строка будет с индексом 1. То есть наш y можно засунуть сюда в чистом виде, что прикольно 😁
По y=1 мы получим первую строку, а по y=2 вторую строку. С x также.
Просто получаем значение последней ячейки на нужном уровне, вот и наша сумма.
Я решил перенести эти расчёты из "mousemove" в "mouseover". Потому что эти расчёты нужно выполнить только один раз, а не постоянно, когда двигается мышка.
Вот так это выглядит. Теперь нужно получить сумму по столбцу.
То же самое, только мы сначала получаем последний элемент из строк, а потом ищем элемент по x.
И получается вот такая красота. Всё работает 😀
Теперь устраняем мелкие недоработки.
Нам нужно разукрасить первую колонку и сделать так, чтобы при наведении курсора на неё не отображалось окно
На первый взгляд, там и так ничего не отображается. Но это происходит не потому что мы сделали это, а потому что код ошибку выдаёт. А это не порядок.
Я предлагаю сделать каких-нибудь два класса для этой таблице:
1) blue-td (точно такие же стили, как и у th (ячейки в самом верху, синие))
2) td-infopanel-disable (ячейки, при наведении на которые панель появляться не будет)
Добавляем этот класс к ячейкам из самой первой колонки. Ну и к ячейкам из последней.
И добавляем этот класс элементам строчки с суммами.
Самое главное, сделать так, чтобы ячейки с этими классами не вызывали окно.
Чуть не забыл добавить им классы blue-td
Да, надо бы отключить им анимации
Вот, всё получается очень хорошо. Все окна появляются правильно, никаких багов, всё работает, в консоли больше нет никаких ошибок.
И так, мы выполнили все пункты задачи от Алисы.
Подведём итоги
Мне очень сильно понравилась задача от Алисы, очень сильно понравилась задумка и дизайн. Задачу было решать реально интересно, и что самое главное, интересно её было показывать зрителям в своём блоге.
Из минусов то, что пунктов задачи слишком много, ещё окна всплывающие делать нужно, мне кажется, для задачи это слишком много. Мы не задачу делаем, а какой-то мини проект.
Также у Алисы были некоторые баги в коде, но эти баги легко устраняются. Тем более это нейросеть, для нейронки это нормально. Я сомневаюсь, что Алиса свой код запускала у себя на компьютере, вероятно, она писала его вслепую, и всё равно получилась такая красота. Для нейросети HTML и CSS код вместе с задумкой были сгенерированы хорошо.
Я только пробую создавать отдельную рубрику на своём канале под названием "Задачи от Алисы". Суть такой рубрики в том, что даже в условиях ограничений и белых списков, я нахожу способы и дальше вести свой блог, решать задачи и продолжать писать, продолжать творить.
На удивление, получилось не что-то скучное и однообразное. Наоборот, контент сильно преобразился и стал намного интереснее того, что я обычно пишу.
Ну а была ли статья интересной или нет, решать вам. Ставьте лайки, подписывайтесь на канал и пишите комментарии 😀
Ну а на это всё, с вами был канал "Тёмыч Студио", всем пока 😁