artbound_python/static/simple.html (view raw)
1<!DOCTYPE html>
2
3<head>
4 <title>ArtBound Panel 2.0</title>
5 <style>
6 .container {
7 width: 100%;
8 display: grid;
9 grid-template-columns: repeat(4, 1fr);
10 grid-template-rows: repeat(auto-fill, 120px);
11 grid-row-gap: .5em;
12 grid-column-gap: 1em;
13 }
14 </style>
15</head>
16
17<body>
18 <div id="app" class="container">
19 </div>
20
21 <button onclick="addTemplate()">Add element</button>
22
23 <template id="item_template">
24 <div class="item" style="background: {{color}}">
25 <p>{{ num }}</p>
26 <p>
27 <button class="del_el" onClick="deleteElement(this)">Delete</button>
28 </p>
29 </div>
30 </template>
31 <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
32 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
33 <script>
34 const COLORS = [
35 '#FE9',
36 '#9AF',
37 '#F9A',
38 "#AFA",
39 "#FA7"
40 ];
41
42 function addItem(container, template) {
43 let color = COLORS[_.random(COLORS.length - 1)];
44 let num = _.random(10000);
45
46 node = Mustache.render(template, { color, num });
47 container.insertAdjacentHTML('beforeend', node);
48 }
49
50 function deleteElement(element) {
51 element.parentNode.parentNode.remove();
52 }
53
54 const tmpl = document.getElementById('item_template').innerHTML;
55 const container = document.getElementById('app');
56
57 function addTemplate() {
58 addItem(container, tmpl);
59 }
60
61 for (let i = 0; i < 5; i++) {
62 addTemplate()
63 }
64 </script>
65</body>