task-11

Задача к лекции «DOM и события»

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

Перед вами сборник алхимических рецептов (formulas.js).

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

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

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

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

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

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

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

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

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

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

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

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