update

2023-07-13 15:09:26 +02:00 · 2023-07-13 15:07:40 +02:00 · 2023-07-13 15:05:34 +02:00 · 2023-07-13 15:02:53 +02:00 · 2023-07-13 14:59:45 +02:00 · 2023-07-13 14:58:28 +02:00
3 changed files with 15443 additions and 0 deletions
--- a/src/index.html
+++ b/src/index.html
@ -5,8 +5,76 @@
    <title>FrOSCon - 2023 - Demo</title>

    <link href="./css/bootstrap.min.css" rel="stylesheet">
+    <script src="./js/vue.js"></script>
 </head>
 <body class="container">
    <h1>Hello World</h1>
+
+    <div class="card" id="app">
+        <div class="card-body">
+            <h5 class="card-title">{{ message }}</h5>
+            <p class="card-text">
+                <input type="text" v-model="message" />
+            </p>
+            <p>
+                Cards: {{ cards.length }}
+                Charcounter: {{ amountOfChars }}
+                Average Chars: {{ averageCharsAmount }}
+            </p>
+            <a href="#" class="btn btn-primary" v-on:click="addCard">Add Card</a>
+        </div>
+
+        <div class="row">
+            <div class="col-6" v-for="(card, i) of cards" :key="card.id">
+                <card :css-class="i % 2 === 0 ? 'bg-primary' : 'bg-secondary'"
+                      v-on:card-click="removeCard(i)">
+                    {{ card.content }} ({{ card.id }})
+                </card>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const MyVueApp = Vue.createApp({
+            data() {
+                return {
+                    message: 'Hello Vue!',
+                    cards: [],
+                }
+            },
+            computed: {
+                amountOfChars() {
+                    if(this.cards.length === 0) return 0
+
+                    return this.cards.map(c => c.content.length).reduce((pv, cv) => pv + cv)
+                },
+                averageCharsAmount() {
+                    if(this.amountOfChars === 0) return 0
+
+                    return this.amountOfChars / this.cards.length
+                }
+            },
+            methods: {
+                addCard() {
+                    this.cards.push({
+                        id: new Date().getTime(),
+                        content: this.message,
+                    })
+                },
+                removeCard(i) {
+                    this.cards.splice(i, 1)
+                }
+            },
+            watch: {
+                message(newValue) {
+                    console.log("Message changed: ", newValue)
+                }
+            }
+        })
+    </script>
+    <script src="./js/card.js"></script>
+    <script>
+        MyVueApp.mount('#app')
+    </script>
 </body>
 </html>
--- a/src/js/card.js
+++ b/src/js/card.js
@ -0,0 +1,14 @@
+MyVueApp.component('card', {
+    props: ['cssClass'],
+    template: `
+<div class="card" v-on:click="$emit('card-click')">
+    <div :class="cssClass">
+        <div class="card-body">
+            <h5 class="card-title">
+                <slot></slot>
+            </h5>
+        </div>
+    </div>
+</div>
+    `
+})
--- a/src/js/vue.js
+++ b/src/js/vue.js
Author	SHA1	Message	Date
sschum	51024df8e8	update	2023-07-13 15:09:26 +02:00
sschum	4ee9969860	update	2023-07-13 15:07:40 +02:00
sschum	03f43618ff	update	2023-07-13 15:05:34 +02:00
sschum	ad97f8c66b	update	2023-07-13 15:02:53 +02:00
sschum	6abb9bcf8d	update	2023-07-13 14:59:45 +02:00
sschum	0ad1ecbc14	update	2023-07-13 14:58:28 +02:00
sschum	d8a4bd6af4	update	2023-07-13 14:54:56 +02:00
sschum	42db27c5d0	update	2023-07-13 14:53:36 +02:00
sschum	c2ddb12140	update	2023-07-13 14:50:52 +02:00
sschum	0b840d140a	update	2023-07-13 14:48:15 +02:00
sschum	b4241566b6	update	2023-07-13 14:45:35 +02:00
sschum	4792c56eab	update	2023-07-13 14:40:46 +02:00
sschum	6008ec8c29	update	2023-07-13 14:35:07 +02:00