Simple Todo App using Jupyter, Python and jupyter-declarativewidgets (https://groups.google.com/forum/#!topic/jupyter/06RLfkkdrys)

TodoList.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Simple Todo App\n",
    "The goal of this demo is to show how simple it is to create a simple Todo list application self contained in a notebook on a couple of cells using [`jupyter-declarativewidgets`](https://github.com/jupyter-incubator/declarativewidgets)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Python Code\n",
    "The Todo list is held as a Python variable `todo`. Two methods are defined to add and remove items from the todo list. The main thing to note are the `channel().set()` calls that syncronizes with the browser side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from urth.widgets.widget_channels import channel\n",
    "\n",
    "todo = []\n",
    "\n",
    "def addTodo(title, date=None):\n",
    "    global todo\n",
    "    todo = todo + [(title, date)]\n",
    "    channel().set(\"todo\", todo)\n",
    "\n",
    "def removeTodo(idx:int):\n",
    "    global todo\n",
    "    del todo[idx]\n",
    "    channel().set(\"todo\", todo)\n",
    "    \n",
    "channel().set(\"todo\", [])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Markup\n",
    "The markup below combines `jupyter-declarativewidgets` elements, Polymer elements and raw HTML. The cell defines the area for the list and a simple form to add new items."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%HTML\n",
    "<template is=\"urth-core-bind\">\n",
    "    <urth-core-function id=\"addTodo\" ref=\"addTodo\" arg-title=\"{{title}}\" arg-date=\"{{dueDate}}\"></urth-core-function>  \n",
    "    <urth-core-function id=\"removeTodo\" ref=\"removeTodo\"></urth-core-function>  \n",
    "    <h1> Todo List </h1>\n",
    "    <ul style=\"list-style: none\">\n",
    "        <template is=\"dom-repeat\" items=\"{{todo}}\">\n",
    "            <li style=\"padding: 2px 0\"><button value=\"{{index}}\" onClick=\"removeTodo.argIdx=this.value; removeTodo.invoke();\">x</button> {{item.0}}</li>\n",
    "        </template>\n",
    "    </ul>\n",
    "    <br/>Add New Time\n",
    "    <form onSubmit=\"return false;\">\n",
    "        title: <input id=\"titleIn\" type=\"text\" value=\"{{title::change}}\"></input> \n",
    "        date: <input id=\"dateIn\" type=\"text\" value=\"{{dueDate::change}}\"></input> \n",
    "        <button onClick=\"addTodo.invoke(); titleIn.value=''; dateIn.value=''\">Add</button>\n",
    "    </form\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "#### This is a screenshot of this notebook in action.\n",
    "![GitHub Logo](http://i.imgur.com/Q4PXPnk.gif)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}