⚡ Vue App Todo

• Vue app to display todo items with a checkbox to show item is done and a button to remove the todo item from the list.

Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Vue App Todo _ 📄 Table of contents _ 📚 General info _ 📷 Screenshots _ 📶 Technologies _ 💾 Setup _ 💻 Code Examples _ 🆒 Features _ 📋 Status & To-Do List _ 👏 Inspiration _ ✉️ Contact

📚 General info

• Data displayed using one-way data-binding and v-for loops.

📷 Screenshots

📶 Technologies

• Vue framework v2.6.11 used by adding the vue script to the body of the index.html page.
• Vue DevTools extension for Chrome.
• Code Garden ready-made css library used for basic styling.

💾 Setup

• Open index.html. This is just a html page so it will not automatically reload if you change any of the source files.

💻 Code Examples

• App.js file: including data array and methods to add and remove todos

const app = new Vue({
	el: '#app',
	data: {
		title: 'hello',
		newTodo: '',
		todos: [],
	},
	methods: {
		addTodo() {
			console.log('form submitted');
			this.todos.push({
				title: this.newTodo,
				done: false,
			});
			this.newTodo = ''; /*clear input box*/
		},
		removeTodo(todo) {
			const todoIndex = this.todos.indexOf(todo);
			this.todos.splice(todoIndex, 1);
		},
		allDone() {
			this.todos.forEach((todo) => {
				todo.done = true;
			});
		},
	},
});

🆒 Features

• Minimal amount of code, no dependencies to update.

📋 Status & To-Do List

• Status: Simple working app with basic UI.
• To-Do: add functionality - change todo checkbox to a proper button with 'todoDone()' function.

👏 Inspiration

• Youtube: Coding Garden: Intro to Vue.js: Build a Todo App

✉️ Contact

• Repo created by ABateman - you are welcome to send me a message