Всем привет. Сегодня мы будем решать задачи по JavaScript от Яндекс Алисы!!! 😀😁
Как же так получилось, спросите вы. Раньше я решал задачи на разных сайтах, а теперь зачем-то их прошу сгенерировать Яндекс Алису... Интересно...
А дело в том, что сейчас я нахожусь у себя на даче, а wi-fi у меня нет. Приходится пользоваться мобильным интернетом, который ограничен белыми списками. Через него я могу заходить только в ВК, сервисы Яндекса и другие одобренные сайты.
Но я решил не сдаваться и написать сегодняшнюю статью, находясь в ограничениях и используя только то, что есть под рукой.
Хотя, если подумать, такая интересная идея может вылиться в отдельный формат на моём блоге, который может заинтересовать зрителей.
Давайте посмотрим, что из этого получится, я надеюсь, вам понравится данный формат, ну а я начинаю. Поехали... 😁😎
Получаем задачку от Алисы
Генерируем задачу
Получаем вот такую задачу
Вот такую задачу для нас сгенерировала Алиса. Также она сделала для нас CSS код, чтобы стилизовать эти сундуки (вставлять в скриншот весь не буду)
Вот такая интересная задача у нас получается. Кроме этого, Алиса дала нам некоторые подсказки. Она описала этапы выполнения задачи (это не покажу, там слишком много), а также её критерии проверки.
Мне нравится, давайте начинать.
Приступаем к решению задачи
Вставляем все коды, которые для начала решения прислала Алиса
Если запустить, получится вот это...
Хмм... Необычно... Ладно...
Если посмотреть файлы CSS, за сундуки у нас отвечает класс "chest". В зависимости от его дополнительного класса (.chest--gold, .chest--gems и т.д.) ему добавляются цвета.
Нужно написать скрипт, который будет отображать эти сундуки.
Делаем цикл, который будет перебирать все записи массива chests. Для каждой записи будем создавать объект, добавлять ему класс "chest", задавать свойства "left" и "top" в соответствии с x и y, а потом будем вставлять этот элемент, куда нужно.
Но этим сундукам нужно задать ещё один класс, чтобы они разукрашивались в какой-либо цвет, иначе они будут прозрачными.
Вот такие классы у нас для добавления цветов
Вот такая карта у нас получается. Только наши сундуки слишком плотно находятся друг к другу, так ещё и на кнопки налезают. Нужно их сместить немного вниз.
Так, отображение сундуков мы сделали. А что дальше?
Здесь есть требования к задаче
Делаем текст для сундуков из value
Смотрим, что нужно сделать дальше по заданию. Дальше осталось добавить фильтр (главная цель задачи), а также добавить подсказки.
Чтобы скрыть лишние сундуки, сделаю класс "hidden"
Вот эти кнопки это фильтры, которые показывают только выбранный тип сундуков
Задаём этим кнопкам обработчики кликов
Пишем вот такой код.
Этот код подключается ко всем сундукам, которые не имеют класс .chest--gold и задаёт им класс "hidden". А для сундуков, у которых есть этот класс, убирает класс hidden.
Сейчас протестируем. Если будет работать, этот механизм распространим на все остальные кнопки.
Да, работает
Сделаем это для двух других кнопок
Да, это тоже работает
Теперь делаем код для кнопки, которая убирает фильтры и показывает всё
Осталось сделать последнее, а именно подсказку при наведении
Для нашей подсказки Алиса уже заранее задала стили
Создадим этот элемент
Теперь нужно через JavaScript сделать так, чтобы при наведении на элемент, он появлялся в нужное время в нужном месте с нужным текстом.
Создаём переменную и загружаем туда нашу подсказку.
После этого заходим в цикл, где создаются наши сундуки, и каждому сундуку добавляем два обработчика события. Если мышь наведена на сундук (mouseenter), то подсказке будет задан нужный текст, будет написано value и type, а также будет задан класс show. А при исчезновении курсора с сундука, класс будет убираться.
Пока просто напишем несколько строчек и посмотрим, как это будет выглядеть.
Выглядит это неплохо. Но стоит этой подсказке задать координаты.
И стоило бы сделать ей нормальный текст.
Вот так у нас получается
Совсем забыл. Подсказка должна следовать не за сундуком, а за курсором
Делаем это так. В самом начале задаём текст, класс "show" и координаты. А потом добавляем событие движения курсора ("mousemove"), где уже просто постоянно задаём координаты.
Вроде бы всё работает нормально, но есть проблема. Наши сундуки не исчезают нормально, им просто задаётся прозрачность, из за чего происходит вот такой баг
Меняем свойство "hidden"
Смотрим, что получается, и подводим итоги
Получилось достаточно интересно. Наша задача выполнена, сундуки отображаются, фильтры работают, подсказки вылезают.
Задача от Яндекс Алисы получилась довольно интересной, хоть она и не сложная. Мне удивляет, какую интересную задачу придумала для нас Алиса, какие стили она ей задала и как всё продумала (кроме свойства hidden с opacity: 0).
Когда я начинал писать эту статью, я находился у себя на даче, где у меня не было wi-fi, а мобильный интернет был ограничен белыми списками. Но даже в таких условиях я умудрился создать для вас контент, только используя то, что есть под рукой. И даже так, мой новый контент получился интереснее, чем обычно.
Да что там интереснее, я создал новую рубрику в своём блоге, задачки от Яндекс Алисы, задачи от нейронки. Я не знаю, делал ли кто-то подобный контент, но я считаю, что это было очень интересно.
Ну а вы не забывайте подписываться на канал, ставить лайки и писать комментарии. 😀😁😎