Генератор форм. Техническое задание.
Нужно написать код, который сможет преобразовывать json с описанием контента формы в готовую вёрстку.
Например этот json:
{
"inputs": [
{
"label": "Фамилия",
"type": "text",
"id": "last_name"
},
{
"label": "Возраст",
"type": "number",
"id": "age"
}
}
"submit": {
"url": "www.example.com",
"text": "Отправить"
}
}
... должен преобразовываться в такой html
:
<form action="www.example.com">
<label for="last_name">Фамилия</label>
<input type="text" id="last_name"/>
<label for="first_name">Возраст</label>
<input type="number" id="age"/>
<button>Отправить</button>
<style>
<!-- стили для элементов формы -->
</style>
</form>
Важное:
- Формат
json
и итоговой вёрстки нужно придумать. Тот, что в
примере, взят для примера. Постарайтесь учесть в вашем решении все, что может пригодится в хорошей форме.
- У вас должен получиться модуль на JavaScript, который принимает на вход JSON, описывающий форму
(в вашем формате) и генерирует по нему HTML с разметкой формы и всеми необходимыми ресурсами (CSS и
JS).
- Документация по вашему формату описания формы и работе модуля должна быть на русском языке.
- Использовать можно только ванильные технологии веба: JS, CSS, HTML. JS-фреймворки и библиотеки,
css-препроцессоры и шаблонизаторы использовать нельзя.
- В качестве образца дизайна можно взять библиотеку компонентов
VK UI.
- В лучших традициях предлагаем взять для демо-примера формы
заявку полета на Марс.
- Задача со звездочкой: выложить решение на ваш гитхаб.
По каким критериям будет оцениваться результат:
- удобство и полнота придуманного вами формата описания формы
- читабельность и понятность документации к этому формату
- семантика вёрстки
- расширяемость кода
На что нужно обратить внимание:
- доступность
- удобство использования вашего кода как библиотечного модуля
- качество документации
На что можно обратить внимание бонусом:
- инкапсуляция стилей
- тёмная тема
- возможность локализации
Удачи!