shashi/todo.css

## todo.css
/* CSS declarations go here */
.wrapper {
    width: 960px;
    margin: 10px auto;
}

ul {
    list-style: none;
}

ul li {
    padding: 0.5em;
}
ul li:hover {
    background: #f1f1f1;
}

## todo.html
<head>
  <title>todo</title>
</head>

<body>
    <div class="wrapper">
      {{> list}}
      {{> addTodo}}
  </div>
</body>

<template name="list">
    <h1>Todo</h1>
    <ul>
    {{#each todoList}}
        {{> todoItem}}
    {{/each}}
    </ul>
</template>

<template name="todoItem">
<li><input type="checkbox" class="done" {{#if done}}checked="checked"{{/if}}"></input> {{title}} </li>
</template>

<template name="addTodo">
<input type="text" id="newTitle"></input> <input type="button" class="addOff btn btn-primary" value="Add"></input>
</template>

## todo.js
TodoItems = new Meteor.Collection("todoitems");

if (Meteor.isClient) {
    Template.list.todoList = function () {
        return TodoItems.find().fetch();
    };

    Template.addTodo.events({
        'click .addOff': function () {
            //alert("Creating new todo: " + $("#newTitle").val());
            var newTodo = {
                title: $("#newTitle").val(),
                done: ! this.done
            };

            TodoItems.insert(newTodo);
        }
    });
    Template.todoItem.events({
        'change .done': function (a, b) {
            TodoItems.update(this._id, {$set: {done: true}});
        }
    });
}
	/* CSS declarations go here */
	.wrapper {
	width: 960px;
	margin: 10px auto;
	}

	ul {
	list-style: none;
	}

	ul li {
	padding: 0.5em;
	}
	ul li:hover {
	background: #f1f1f1;
	}
	<head>
	<title>todo</title>
	</head>

	<body>
	<div class="wrapper">
	{{> list}}
	{{> addTodo}}
	</div>
	</body>

	<template name="list">
	<h1>Todo</h1>
	<ul>
	{{#each todoList}}
	{{> todoItem}}
	{{/each}}
	</ul>
	</template>

	<template name="todoItem">
	<li><input type="checkbox" class="done" {{#if done}}checked="checked"{{/if}}"></input> {{title}} </li>
	</template>

	<template name="addTodo">
	<input type="text" id="newTitle"></input> <input type="button" class="addOff btn btn-primary" value="Add"></input>
	</template>
	TodoItems = new Meteor.Collection("todoitems");

	if (Meteor.isClient) {
	Template.list.todoList = function () {
	return TodoItems.find().fetch();
	};

	Template.addTodo.events({
	'click .addOff': function () {
	//alert("Creating new todo: " + $("#newTitle").val());
	var newTodo = {
	title: $("#newTitle").val(),
	done: ! this.done
	};

	TodoItems.insert(newTodo);
	}
	});
	Template.todoItem.events({
	'change .done': function (a, b) {
	TodoItems.update(this._id, {$set: {done: true}});
	}
	});
	}