update

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 · 2023-07-13 14:54:56 +02:00 · 2023-07-13 14:53:36 +02:00
3 changed files with 15438 additions and 0 deletions
--- a/src/index.html
+++ b/src/index.html
@ -5,8 +5,73 @@
    <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'"></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,12 @@
 MyVueApp.component('card', {
    props: ['cssClass'],
    template: `
 <div class="card">
    <div :class="cssClass">
        <div class="card-body">
            <h5 class="card-title"></h5>
        </div>
    </div>
 </div>
    `
 })
--- a/src/js/vue.js
+++ b/src/js/vue.js
Author	SHA1	Message	Date
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