---
title: Form
tags:
- ui
---
{% assign bodyClass = "body_frame" -%}
{% layout "hippie/app.liquid" %}

{% block body %}
{% render 'hippie/partials/frame-header.liquid' %}
<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 %}
{{ block.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 %}