From 71e61697b776765131b7fb34e711084f077e455b Mon Sep 17 00:00:00 2001 From: 6437a2bc3c05b0675a61786b <6437a2bc3c05b0675a61786b@devide> Date: Mon, 19 Jun 2023 14:24:00 +0000 Subject: [PATCH] Mon Jun 19 14:24:00 UTC 2023 inscode --- src/todolist.js | 81 ++++++++----------------------------------------- 1 file changed, 13 insertions(+), 68 deletions(-) diff --git a/src/todolist.js b/src/todolist.js index 8850639..b92abf1 100644 --- a/src/todolist.js +++ b/src/todolist.js @@ -1,68 +1,13 @@ -Vue.component('togglebutton', { - props: ['label', 'name'], - template: `
`, - model: { - prop: 'checked', - event: 'change' - }, - data: function() { - 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 +- 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 -- GitLab