Simple todo app with meteor

•

0 likes•1,458 views

Alex Long

Technology

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

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

What's hot

Robust web apps with React.jsMax Klymyshyn

Getting started with node JSHamdi Hmidi

Meteor Day Athens (2014-11-07)svub

GatlingTengwen Wang

Qtp Tutorial 4 Recording Of Tests In Qtp With Drag And Drop Web ElementsYogindernath Gupta

IBM and Node.js - Old Doge, New TricksDejan Glozic

Introduction to ReactJSHoang Long

Web Development with NodeJSRiza Fahmi

React JS - IntroductionSergey Romaneko

007. Redux middlewaresBinh Quan Duc

HTML5Cuelogic Technologies Pvt. Ltd.

JavaScript innovaties: ECMAScript 6 & 7Rick Beerendonk

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]Ortus Solutions, Corp

Building time machine with .net core Alper Hankendi

Introduction to ReactJSJarosław Jaryszew

Introduction to ReactJSTu Hoang

React, Flux and more (p1)tuanpa206

Enterprise level application in 5 minAustin Gil

Wicket Live on StageMartijn Dashorst

JavaScript Roadmap - DOM ManipulationAswin Barath

What's hot (20)

Robust web apps with React.js

Getting started with node JS

Meteor Day Athens (2014-11-07)

Gatling

Qtp Tutorial 4 Recording Of Tests In Qtp With Drag And Drop Web Elements

IBM and Node.js - Old Doge, New Tricks

Introduction to ReactJS

Web Development with NodeJS

React JS - Introduction

007. Redux middlewares

HTML5

JavaScript innovaties: ECMAScript 6 & 7

Brad wood - Integrating MVC Into Legacy [Into The Box 2020]

Building time machine with .net core

Introduction to ReactJS

React, Flux and more (p1)

Enterprise level application in 5 min

Wicket Live on Stage

JavaScript Roadmap - DOM Manipulation

Viewers also liked

AWS Summit Berlin 2013 - Keynote - 6wunderkinderAWS Germany

Nano Goals AppCarlos Medina Cano

Bibstrip Wunderlist - lijstjes makenKatrien Schroyens

ProjectGladys Zamora

Engineering Wunderlist for Android - Ceasr Valiente, 6WunderkinderDroidConTLV

Myriam al dhaheri 201017821 - wunderlist – helps you manage your daily list...Myriam Al Dhaheri

To Do List Karma - Life style gamification - Manu Melwin Joymanumelwin

Todoist iPhone App - Onboarding RoastSanket Nadhani

Todoist Logo Design ProcessTodoist

9 Daily Habits of Entrepreneurs.Erica MacDonald RN,BSN,MSN

How To Grow Your SMS Marketing DatabaseTatango

Empower Customer Engagement with Mobile ContextMobile Marketing Association

Mobile Means BusinessTack Mobile

The Mobile Content MandateKaren McGrane

The Do's and Dont's of Stellar Push and In-App Messaging: September 2014 WebinarLocalytics

Create and Convert Mobile Moments of TruthGreg Hickman

Social Action Mobile MarketingWaterfall Mobile

Mobile Metrics 101: Everything web marketers need to know about app analyticsLocalytics

ComputersRolando Castillo

Selling The Mobile WebBrad Frost

Viewers also liked (20)

AWS Summit Berlin 2013 - Keynote - 6wunderkinder

Nano Goals App

Bibstrip Wunderlist - lijstjes maken

Project

Engineering Wunderlist for Android - Ceasr Valiente, 6Wunderkinder

Myriam al dhaheri 201017821 - wunderlist – helps you manage your daily list...

To Do List Karma - Life style gamification - Manu Melwin Joy

Todoist iPhone App - Onboarding Roast

Todoist Logo Design Process

9 Daily Habits of Entrepreneurs.

How To Grow Your SMS Marketing Database

Empower Customer Engagement with Mobile Context

Mobile Means Business

The Mobile Content Mandate

The Do's and Dont's of Stellar Push and In-App Messaging: September 2014 Webinar

Create and Convert Mobile Moments of Truth

Social Action Mobile Marketing

Mobile Metrics 101: Everything web marketers need to know about app analytics

Computers

Selling The Mobile Web

Similar to Simple todo app with meteor

code-camp-meteormeghna gogna

METEOR 101Tin Aung Lin

Meteor.js Workshop by DopravoArabNet ME

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Frontend microservices: architectures and solutionsMikhail Kuznetcov

Javascript MVVM with Vue.JSEueung Mulyana

Meteor Day TalkBrandon Bechtel

Beginning MEAN StackRob Davarnia

Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga

State of modern web technologies: an introductionMichael Ahearn

Ta Javaserverside Eran TochAdil Jafri

Test Automation for NoSQL DatabasesTobias Trelle

Rest web service_with_spring_hateoasZeid Hassan

Node JS Express: Steps to Create Restful Web AppEdureka!

AngularJS for Web and MobileRocket Software

CraftCamp for Students - Introduction to Meteor.jscraftworkz

Java Script - A New Lookrumsan

How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon

Practical ODataVagif Abilov

Magento Performance Optimization 101Angus Li

Similar to Simple todo app with meteor (20)

code-camp-meteor

METEOR 101

Meteor.js Workshop by Dopravo

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies

Frontend microservices: architectures and solutions

Javascript MVVM with Vue.JS

Meteor Day Talk

Beginning MEAN Stack

Full Stack React Workshop [CSSC x GDSC]

State of modern web technologies: an introduction

Ta Javaserverside Eran Toch

Test Automation for NoSQL Databases

Rest web service_with_spring_hateoas

Node JS Express: Steps to Create Restful Web App

AngularJS for Web and Mobile

CraftCamp for Students - Introduction to Meteor.js

Java Script - A New Look

How to Build ToDo App with Vue 3 + TypeScript

Practical OData

Magento Performance Optimization 101

Recently uploaded

Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz

Search Engine Optimization SEO PDF for 2024.pdfRankYa

Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB

Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi

Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski

Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays

Commit 2024 - Secret Management made easyAlfredo García Lavilla

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University

Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

Gen AI in Business - Global Trends Report 2024.pdfAddepto

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang

WordPress Websites for Engineers: Elevate Your Brandgvaughan

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

AI as an Interface for Commercial BuildingsMemoori

Recently uploaded (20)

Vector Databases 101 - An introduction to the world of Vector Databases

Search Engine Optimization SEO PDF for 2024.pdf

Developer Data Modeling Mistakes: From Postgres to NoSQL

Vertex AI Gemini Prompt Engineering Tips

Streamlining Python Development: A Guide to a Modern Project Setup

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...

Unraveling Multimodality with Large Language Models.pdf

Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...

Commit 2024 - Secret Management made easy

Human Factors of XR: Using Human Factors to Design XR Systems

New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

Nell’iperspazio con Rocket: il Framework Web di Rust!

Dev Dives: Streamline document processing with UiPath Studio Web

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

Gen AI in Business - Global Trends Report 2024.pdf

Bun (KitWorks Team Study 노별마루 발표 2024.4.22)

WordPress Websites for Engineers: Elevate Your Brand

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

AI as an Interface for Commercial Buildings

Simple todo app with meteor

1. TodoAppwith Meteor » Long Nguyen » @vangnol

2. 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.

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

4. Demo Simple Todo App with Meteor ♡♡♡

5. 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>

6. <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>

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

8. 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' : '' } });

9. 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(); } }); }

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

11. 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

12. Thankyou!

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