JeffreyWay/App.js

## App.js
import Assignments from "./Assignments.js";

export default {
    components: { Assignments },

    template: `
        <assignments></assignments>
    `,
}

## Assignment.js
export default {
    template: `
        <li>
            <label class="p-2 flex justify-between items-center">
                {{ assignment.name }}

                <input type="checkbox" v-model="assignment.complete" class="ml-3">
            </label>
        </li>
    `,

    props: {
        assignment: Object
    }
}

## AssignmentCreate.js
export default {
    template: `
        <form @submit.prevent="add">
            <div class="border border-gray-600 text-black">
                <input v-model="newAssignment" placeholder="New assignment..." class="p-2" />
                <button type="submit" class="bg-white p-2 border-l">Add</button>
            </div>
        </form>
    `,

    data() {
        return {
            newAssignment: ''
        }
    },

    methods: {
        add() {
            this.$emit('add', this.newAssignment);

            this.newAssignment = '';
        }
    }
}

## AssignmentList.js
import Assignment from "./Assignment.js";

export default {
    components: { Assignment },

    template: `
        <section v-show="assignments.length">
            <h2 class="font-bold mb-2">{{ title }}</h2>

            <ul class="border border-gray-600 divide-y divide-gray-600">
               <assignment
                    v-for="assignment in assignments"
                    :key="assignment.id"
                    :assignment="assignment"
                ></assignment>
            </ul>
        </section>
    `,

    props: {
        assignments: Array,
        title: String
    }
}

## Assignments.js
import AssignmentList from "./AssignmentList.js";
import AssignmentCreate from "./AssignmentCreate.js";

export default {
    components: { AssignmentList, AssignmentCreate },

    template: `
        <section class="space-y-6">
            <assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
            <assignment-list :assignments="filters.completed" title="Completed"></assignment-list>

            <assignment-create @add="add"></assignment-create>
        </section>
    `,

    data() {
        return {
            assignments: [
                { name: 'Finish project', complete: false, id: 1 },
                { name: 'Read Chapter 4', complete: false, id: 2 },
                { name: 'Turn in Homework', complete: false, id: 3 },
            ],
        }
    },

    computed: {
        filters() {
            return {
                inProgress: this.assignments.filter(assignment => ! assignment.complete),
                completed: this.assignments.filter(assignment => assignment.complete)
            };
        }
    },

    methods: {
        add(name) {
            this.assignments.push({
                name: name,
                completed: false,
                id: this.assignments.length + 1
            });
        }
    }
}

## index.html
<!doctype html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <title>Episode 6: Bring it All Together</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="h-full grid place-items-center bg-gray-800 text-white">
    <div id="app"></div>

    <script type="module">
        import App from './js/components/App.js';

        Vue.createApp(App).mount('#app');
    </script>
</body>
</html>
	import Assignments from "./Assignments.js";

	export default {
	components: { Assignments },

	template: `
	<assignments></assignments>
	`,
	}
	export default {
	template: `
	<li>
	<label class="p-2 flex justify-between items-center">
	{{ assignment.name }}

	<input type="checkbox" v-model="assignment.complete" class="ml-3">
	</label>
	</li>
	`,

	props: {
	assignment: Object
	}
	}
	export default {
	template: `
	<form @submit.prevent="add">
	<div class="border border-gray-600 text-black">
	<input v-model="newAssignment" placeholder="New assignment..." class="p-2" />
	<button type="submit" class="bg-white p-2 border-l">Add</button>
	</div>
	</form>
	`,

	data() {
	return {
	newAssignment: ''
	}
	},

	methods: {
	add() {
	this.$emit('add', this.newAssignment);

	this.newAssignment = '';
	}
	}
	}
	import Assignment from "./Assignment.js";

	export default {
	components: { Assignment },

	template: `
	<section v-show="assignments.length">
	<h2 class="font-bold mb-2">{{ title }}</h2>

	<ul class="border border-gray-600 divide-y divide-gray-600">
	<assignment
	v-for="assignment in assignments"
	:key="assignment.id"
	:assignment="assignment"
	></assignment>
	</ul>
	</section>
	`,

	props: {
	assignments: Array,
	title: String
	}
	}
	import AssignmentList from "./AssignmentList.js";
	import AssignmentCreate from "./AssignmentCreate.js";

	export default {
	components: { AssignmentList, AssignmentCreate },

	template: `
	<section class="space-y-6">
	<assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
	<assignment-list :assignments="filters.completed" title="Completed"></assignment-list>

	<assignment-create @add="add"></assignment-create>
	</section>
	`,

	data() {
	return {
	assignments: [
	{ name: 'Finish project', complete: false, id: 1 },
	{ name: 'Read Chapter 4', complete: false, id: 2 },
	{ name: 'Turn in Homework', complete: false, id: 3 },
	],
	}
	},

	computed: {
	filters() {
	return {
	inProgress: this.assignments.filter(assignment => ! assignment.complete),
	completed: this.assignments.filter(assignment => assignment.complete)
	};
	}
	},

	methods: {
	add(name) {
	this.assignments.push({
	name: name,
	completed: false,
	id: this.assignments.length + 1
	});
	}
	}
	}
	<!doctype html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<title>Episode 6: Bring it All Together</title>
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body class="h-full grid place-items-center bg-gray-800 text-white">
	<div id="app"></div>

	<script type="module">
	import App from './js/components/App.js';

	Vue.createApp(App).mount('#app');
	</script>
	</body>
	</html>