Задача к лекции «DOM и события» – «Котёл алхимика»

Общие требования

Мы очень хотим, чтобы код вы написали сами на чистом CSS и HTML,
а не пользовались внешними библиотеками или (пост|пре)процессорами.

Прежде чем отправлять решение, проверьте его на соответствие
требованиям к HTML коду и требованиям к CSS.

Когда вы создадите или обновите пулл-реквест, он будет проверен автоматически.
Результаты вы увидите внизу.

Всё хорошо:

Всё плохо:

Проверить HTML и CSS можно вручную:

npm install
npm test

В помощь вам мы разместили файл .editorconfig. Этот файл содержит базовые правила оформления кода, понятные для большинства редакторов. Прочитайте о нём подробнее.

Задача

Юный Геннадий в гостях у бабуленьки нашёл на чердаке потрёпанную и по виду очень древнюю книгу. Рядом с ней обнаружился гигантский, покрытый паутиной, котёл.

Открыв книгу, любознательный Геннадий обнаружил в ней сборник алхимических рецептов. На удивление, там оказался и рецепт создания котиков. Для это надо было всего ничего – просто смешать в котле следующие ингридиенты: «Молоко», «Сметанка» и «Жизнь».

Геннадий подумал, что пара котиков никогда не будет лишней, но, к сожалению котёл оказался неисправен. Будет здорово, если вы поможете Геннадию осуществить задуманное и починить котёл.

Вам необходимо доверстать котёл в index.html, по желанию оформить его в index.css и добавить в cauldron.js следующие механизмы котла:

• Слева выводятся доступные алхимические элементы

• Справа выводятся элементы в котле

• По клику на доступный элемент, он перемещается в котёл

• По клику на элемент в котле, он возвращается из котла в доступные

• Если в котле получилась комбинация из файла formulas.js, над котлом выводится получившийся новый элемент. Если подходит несколько комбинаций – выводится самая сложная.

• В котёл можно положить только один элемент каждого типа

• Слева над доступными элементами есть фильтр:

  • При вводе текста в фильтр, среди доступных остаются только те, которые содержат введённый текст
  • При этом в названиях доступных элементов подсвечивается набранный текст
  • По клику на крестик фильтр очищается и все элементы становятся доступными.

  Например, если набрали «во», слева остаются видны два элемента «__во__да» и «__во__здух», у которых «во» подсвечен.

В этой задаче мы будет в основном уделять внимание JS коду, а не вёрстке.

Задание необходимо решить без использования jQuery и прочих библиотек

Дополнительное задание

Тыкать в предметы, чтобы класть их в котёл, не очень естественно, поэтому будет здорово, если добавить возможность переносить элементы мышкой (drag-n-drop).

Задание необходимо решить без использования jQuery и прочих библиотек