Use Data McFly to build a real-time Todo app

If you like to keep organized, then you want a todo app. In this tutorial, we’re going to build a simple real-time todo app.

This app will consist of four functions:

  1. Add new items to do
  2. Mark items as done
  3. Mark items as not done (undo)
  4. Delete items

This is simple functionality, but it is exactly what a todo app is all about, and can run anywhere as this will consist of an html file, a javascript file and some very basic css.

All you need to build your todo app is a free Data McFly account. There’s no server-side programming needed for this app.

If you haven’t already, Sign up for a free Data McFly account now, then create a new app (database). You’ll use your app for your todo system.

Let’s Get To Work

We’re going to call our todo system McToDo, mostly because it’s fun to give fun names to projects, and this name sounds a little fun.

Let’s create our first file, we’ll call this index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>McToDo: A Data McFly powered todo app</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="https://cdn.datamcfly.com/DataMcFly.js?latest=1"></script>
	<script src="mctodo.js"></script>
	<link rel="stylesheet" type="text/css" href="mctodo.css">
</head>
<body id="body">
	<h1>McToDo</h1>
	<div class="wrapper">
		<div class="todolist">
			<h2>Todo list</h2>
			<p>You have <span id="todo_count">0</span> todos remaining.</p>
			<div id="todo_list_wrapper"></div>
			<form id="todo_form" method="post" accept-charset="utf-8">
				<p><input type="text" name="todo_field" value="" id="todo_field" /><input type="submit" value="Create Todo" /></p>
			</form>
		</div>
	</div>
</body>
</html>

This file is our skeleton, it shows how we’re going to lay out our todo app.

Now, let’s create our style sheet, create new file called mctodo.css:

body {
	font-family: sans-serif;
}

small {
	color: #c0c0c0;
}

.hidden {
	display: none;
}

.wrapper {
	width: 100%;
	overflow: hidden;
}

.todolist {
	width: 30%;
	float:left;
	border: 1px dotted grey;
}

Lastly, we want to set up the brains of our app. We’ve saved the biggest file for last. Let’s create a new file called mctodo.js:

$(function() {
	// replace this api info with yours!!
	var datamcflyRef = new DataMcFly("YOUR-API-KEY", "YOUR-APP", "todo");

	var count = $('#todo_count');
	var form = $('#todo_form');
	var wrapper = $('#todo_list_wrapper');
	var field = $('#todo_field');
	var todo_count = 0;
	var todos = [];

	$("#todo_form").submit( function(e){
		var todo = {
			'todo':field.val(),
			'status':'1'
		};
		datamcflyRef.push(todo);
		field.val('');
		return false;
	});

	function displayTodoItems() {
		var cnt = 0;
		$('#todo_list_wrapper').html('');
		for (var i in todos ) {
			var todo = todos[i];
			if( todo != undefined ){
				var html = '';
				if( todo.status == '1' ){
					html = '<span>'+todo.todo+'</span> <a href="#delete" class="delete" id="' + todo._id+'">[delete]</a> <a href="#done" class="done" id="' + todo._id+'">[done]</a>';
				}else{
					html = '<span style="text-decoration: line-through;">'+todo.todo+'</span> <a href="#delete" class="delete" id="' + todo._id+'">[delete]</a> <a href="#undo" class="undo" id="' + todo._id+'">[not done]</a>';
				}
				$('<div/>').prepend( html ).appendTo($('#todo_list_wrapper'));
				cnt++;
			}
		}
		count.text( cnt );
	}

	datamcflyRef.on('value', function( data ){
		if( data.count() ){
			data.forEach( function(snapshot){
				var todo = snapshot.value();
				todos[todo._id] = todo;
			});
			displayTodoItems();
		}
	});
	datamcflyRef.on('added', function( snapshot ){
		var todo = snapshot.value();
		todos[todo._id] = todo;
		displayTodoItems();
	});
	datamcflyRef.on('changed', function( snapshot ){
		var todo = snapshot.value();
		todos[todo._id] = todo;
		displayTodoItems();
	});

	datamcflyRef.on('removed', function( snapshot ){
		var todo = snapshot.value();
		todos[todo._id] = undefined;
		displayTodoItems();
	});

	$('div').on('click','a.delete', function(e){
		var _id = e.target.id;
		datamcflyRef.remove(_id);
		return false;
	});

	$('div').on('click','a.done', function(e){
		var _id = e.target.id;
		todos[_id].status = '0';
		var todo = todos[_id];
		datamcflyRef.update(_id,todo, function(resp) {
			console.log( "Todo updated" );
		});
		return false;
	});

	$('div').on('click','a.undo', function(e){
		var _id = e.target.id;
		todos[_id].status = '1';
		var todo = todos[_id];
		datamcflyRef.update(_id,todo, function(resp) {
			console.log( "Todo updated" );
		});
		return false;
	});
});

When we first load our app, we’re going to use value event listener to grab a list of todos currently stored in our Data McFly app, then we’ll store them inside a global variable called todos.

anytime we update, remove or add a new item, this variable will get updated. We then fire off a call to our displayTodoItems() function, which will iterate through our todos variable and output each item on the page.

If the status of an item is set to 0, then we will add a strikethrough through the item to show it as done.

Each item will have buttons attached to it, the first button will be a button to delete the item, the next button depends on the status of the item, it will either be a button to mark the item as done or a button to mark the button as not done.

We’re making use of all of Data McFly’s reserved event types in this app, we’re using value, added, changed and removed to affect how our todo list will look.

And We’re Done

We did it! Now that you’ve built a simple todo list app, you’ve gained a further understanding of using Data McFly to build apps.