45 lines
833 B
Text
45 lines
833 B
Text
|
---
|
||
|
|
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 %}
|