Simple todo app with meteor

TodoAppwith Meteor
» Long Nguyen
» @vangnol

Whatis Meteor?
Meteor is a framework for building incredible web
application. Meteor helps you build complex web
application but in minimal amount of time. It's full-
stack framework. On the server it runs on Nodejs,
which means Meteor written in Javascript. Meteor has
out of the box integration with MongoDB database.
Meteor uses DDP Protocal to communicate between
client and server.

Setup
» MacOS or Ubuntu
curl https://install.meteor.com/ | sh
» Windows
Go get a Mac or a Ubuntu laptop

Demo
Simple Todo App with Meteor
♡♡♡

task.html
<head>
<title>Simple Todo App</title>
</head>
<body>
<h1>Awesome Todo App</h1>
<hr/>
<div class="container">
{{> CreateTask}}
{{> ListTasks}}
{{> CompleteCounter}}
</div>
</body>
<template name="ListTasks">
<ul>
{{#each tasks}}
<li class="task {{doneClass}}">{{> Task}}</li>
{{/each}}
</ul>
</template>

<template name="Task">
<input type="checkbox" name="is_done" {{isDoneChecked}} />
{{subject}}
</template>
<template name="CreateTask">
<form class="create-task" >
<input type="text" placeholder="Creating new task...!" />
</form>
</template>
<template name="CompleteCounter">
<h3>{{completeTask}} / {{totalTasks}} tasks completed</h3>
</template>

task.css
.task{
font-size: 20px;
background-color: #EBEBEB;
padding: 10px;
margin-bottom: 2px;
}
.done{
text-decoration: line-through;
}

task.js
Todos = new Meteor.Collection('todos');
if(Meteor.isClient){
Template.ListTasks.helpers({
tasks: function(){
return Todos.ﬁnd();
},
doneClass: function(){
return this.is_done ? 'done' : '';
}
});
Template.Task.helpers({
isDoneChecked: function(){
return this.is_done ? 'checked' : ''
}
});

Template.Task.events({
"click [name=is_done]": function(e, tmpl){
var id = this._id;
var isDone = tmpl.find('input').checked;
Todos.update({_id: id}, {$set: { is_done: isDone}});
}
});
Template.CreateTask.events({
'submit form': function(e, tmpl){
e.preventDefault();
var subject = tmpl.find('input').value;
Todos.insert({subject: subject, created_at: new Date, is_done: false});
var form = tmpl.find('form');
form.reset();
}
});
}

Template.CompleteCounter.helpers({
completeTask: function(){
return Todos.ﬁnd({is_done: true}).count();
},
totalTasks: function(){
return Todos.ﬁnd({}).count();
}
});
}
if(Meteor.isServer){
}

References
» MeteorHacks
» Best Learning Resources
» Meteor Packages
» Why Meteor will kill Ruby on Rails
» Meteor Won’t Kill Rails Anytime Soon
» How to Learn JavaScript Properly

Simple todo app with meteor

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Simple todo app with meteor

Similar to Simple todo app with meteor (20)

Recently uploaded

Recently uploaded (20)

Simple todo app with meteor