petervmeijgaard/todo-vue-example.html

## todo-vue-example.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Todo Vue.js Example</title>
        <link rel="stylesheet"
              type="text/css"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
        <style type="text/css">
            #app {
                margin-top: 2rem;
            }

            .list-group .list-group-item.disabled {
                cursor: default;
                text-decoration: line-through;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                new Vue({
                    el: '#app',
                    data: {
                        todoList: [],
                        newTodo: {
                            content: '',
                            done: false
                        },
                        errors: []
                    },
                    methods: {
                        addTodo: function () {
                            var tempTodo = {
                                content: this.newTodo.content,
                                done: this.newTodo.done
                            };

                            // Empty the errors
                            this.errors = [];

                            // Check if the name is filled in
                            if (tempTodo.content) {
                                this.todoList.push(tempTodo);
                            } else {
                                this.errors.push('You need to fill in a todo');
                            }

                            // Reset the to do
                            this.newTodo.content = '';
                        },
                        deleteTodo: function (todo) {
                            this.todoList.pop(todo);
                        },
                        toggleTodo: function (todo) {
                            todo.done = !todo.done;
                        }
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="app">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <form class="form-horizontal">
                            <div class="alert alert-danger"
                                 v-for="error in errors">{{error}}
                            </div>
                            <div class="form-group">
                                <label for="todo"
                                       class="col-sm-2 control-label">Todo</label>

                                <div class="col-sm-10">
                                    <input type="text"
                                           class="form-control"
                                           v-model="newTodo.content"
                                           placeholder="Todo"
                                           id="todo">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10 col-sm-offset-2">
                                    <button @click.prevent="addTodo()"
                                            class="btn btn-primary btn-block">Add Todo
                                    </button>
                                </div>
                            </div>
                        </form>

                        <ul class="list-group">
                            <li class="list-group-item"
                                v-for="todo in todoList"
                                :class="{'disabled' : todo.done}"
                                @click.prevent="toggleTodo(todo)">
                                <button type="button"
                                        class="close"
                                        @click.prevent="deleteTodo(todo)">
                            <span aria-hidden="true">
                                &times;
                            </span>
                            <span class="sr-only">
                                Close
                            </span>
                                </button>
                                {{todo.content}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Todo Vue.js Example</title>
	<link rel="stylesheet"
	type="text/css"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
	<style type="text/css">
	#app {
	margin-top: 2rem;
	}

	.list-group .list-group-item.disabled {
	cursor: default;
	text-decoration: line-through;
	}
	</style>
	<script type="text/javascript">
	window.onload = function () {
	new Vue({
	el: '#app',
	data: {
	todoList: [],
	newTodo: {
	content: '',
	done: false
	},
	errors: []
	},
	methods: {
	addTodo: function () {
	var tempTodo = {
	content: this.newTodo.content,
	done: this.newTodo.done
	};

	// Empty the errors
	this.errors = [];

	// Check if the name is filled in
	if (tempTodo.content) {
	this.todoList.push(tempTodo);
	} else {
	this.errors.push('You need to fill in a todo');
	}

	// Reset the to do
	this.newTodo.content = '';
	},
	deleteTodo: function (todo) {
	this.todoList.pop(todo);
	},
	toggleTodo: function (todo) {
	todo.done = !todo.done;
	}
	}
	})
	}
	</script>
	</head>
	<body>
	<div id="app">
	<div class="container">
	<div class="row">
	<div class="col-md-6 col-md-offset-3">
	<form class="form-horizontal">
	<div class="alert alert-danger"
	v-for="error in errors">{{error}}
	</div>
	<div class="form-group">
	<label for="todo"
	class="col-sm-2 control-label">Todo</label>

	<div class="col-sm-10">
	<input type="text"
	class="form-control"
	v-model="newTodo.content"
	placeholder="Todo"
	id="todo">
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-10 col-sm-offset-2">
	<button @click.prevent="addTodo()"
	class="btn btn-primary btn-block">Add Todo
	</button>
	</div>
	</div>
	</form>

	<ul class="list-group">
	<li class="list-group-item"
	v-for="todo in todoList"
	:class="{'disabled' : todo.done}"
	@click.prevent="toggleTodo(todo)">
	<button type="button"
	class="close"
	@click.prevent="deleteTodo(todo)">
	<span aria-hidden="true">
	×
	</span>
	<span class="sr-only">
	Close
	</span>
	</button>
	{{todo.content}}
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>