---
title: Form
tags: 
  - demoExample
  - ui
---
{% extends "demo/_app.njk" %}

{% block title %}{{ title }}
{% endblock %}

{% block links %}
	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block head %}
	{{ super() }}
{% endblock %}

{% block body %}
	<div id="head">
		<h1>Formulare</h1>
		<button data-action="add">Hinzufügen</button>
	</div>
	<div id="grid">
		<div>a</div>
		<div>b</div>
	</div>
{% endblock %}

{%- block script %}
	{{ super() }}
	<script>
		const add = document.querySelector('[data-action=add]');

		add.addEventListener('click', (e) => {
				const grid = document.getElementById('grid');
				const item = document.createElement('div');

				item.style.backgroundColor = '#f0f';
				item.textContent = 'c'
				grid.appendChild(item);
		});
	</script>
{% endblock %}