---
title: Form
tags: 
  - ui
---
{% set pageClass = "html_ui" %}
{% set bodyClass = "body_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 %}
	<header class="io">
		<h1>Formulare</h1>
		<button data-action="add">Hinzufügen</button>
		<button data-action="change">Ändern</button>
		<hr>
	</header>
	<form id="form" action="">
		<div id="grid">
			<div>a</div>
			<div>b</div>
			<div>c</div>
		</div>
	</form>
{% endblock %}

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

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

				item.style.backgroundColor = '#f0f';
				item.textContent = 'c'
				
				grid.appendChild(item);
		});

		change.addEventListener('click', (e) => {
				changeLayout(grid);
		});

		function changeLayout(grid) {
			const currentTemplate = grid.style.gridTemplateColumns;

			if (currentTemplate === 'repeat(4, 1fr)') {
				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
			} else {
				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
			}
		}
	</script>
{% endblock %}