Mon Jun 19 14:24:00 UTC 2023 inscode

src/todolist.js

-Vue.component('togglebutton', {
-    props: ['label', 'name'],
-    template: `<div class="togglebutton-wrapper" v-bind:class="isactive ? 'togglebutton-checked' : ''">
-        <label v-bind:for="name">
-          <span class="togglebutton-label">{{ label }}</span>
-          <span class="tooglebutton-box"></span>
-        </label>
-        <input v-bind:id="name" type="checkbox" v-bind:name="name" v-model="isactive" v-on:change="onToogle">
-    </div>`,
-    model: {
-      prop: 'checked',
-      event: 'change'
-    },
-    data: function() {
+- var cards = [{ title: 'Mountain View', copy: 'Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains', button: 'View Trips' }, { title: 'To The Beach', copy: 'Plan your next beach trip with these fabulous destinations', button: 'View Trips' }, { title: 'Desert Destinations', copy: 'It\'s the desert you\'ve always dreamed of', button: 'Book Now' }, { title: 'Explore The Galaxy', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now' }]
+
+
+mixin card(title, copy, button)
+  .card
+    .content
+      h2.title= title
+      p.copy= copy
+      button.btn= button
+
+main.page-content
+  each card in cards
+    +card(card.title, card.copy, card.button)
\ No newline at end of file
-      return {
-        isactive:false
-      }
-    },
-    methods: {
-      onToogle: function() {
-         this.$emit('clicked', this.isactive)
-      }
-    }
-  });
-  
-  var todolist = new Vue({
-    el: '#todolist',
-    data: {
-      newitem:'',
-      sortByStatus:false,
-      todo: [
-        { id:1, label: "Learn VueJs", done: true },
-        { id:2, label: "Code a todo list", done: false },
-        { id:3, label: "Learn something else", done: false }
-      ]
-    },
-    methods: {
-      addItem: function() {
-        this.todo.push({id: Math.floor(Math.random() * 9999) + 10, label: this.newitem, done: false});
-        this.newitem = '';
-      },
-      markAsDoneOrUndone: function(item) {
-        item.done = !item.done;
-      },
-      deleteItemFromList: function(item) {
-        let index = this.todo.indexOf(item)
-        this.todo.splice(index, 1);
-      },
-      clickontoogle: function(active) {
-        this.sortByStatus = active;
-      }
-    },
-    computed: {
-      todoByStatus: function() {
-  
-        if(!this.sortByStatus) {
-          return this.todo;
-        }
-  
-        var sortedArray = []
-        var doneArray = this.todo.filter(function(item) { return item.done; });
-        var notDoneArray = this.todo.filter(function(item) { return !item.done; });
-        
-        sortedArray = [...notDoneArray, ...doneArray];
-        return sortedArray;
-      }
-    }
-  });
\ No newline at end of file