added demo

Author: panManfredini

README.md

@@ -18,6 +18,10 @@ citizens. The main features are:
 - Works with async out of the box.
 - It is tested.
 
+# Demo
+
+Have a look at a [simple todo App demo](https://webcomponenthelpers.github.io/ImperaJS/demo/) made with ImperaJs.
+
 # Getting Started
 
 Of course... new framework, new sets of names for the same things... So let's first get the namings right:

demo/webComponents.js

@@ -55,7 +55,7 @@ let mxn_todo = html`
         </style>
 
         <div class="tags has-addons is-centered" style="margin-bottom:0rem">
-            <span ${"#-status"} class="tag is-warning" onclick="this.root.toggle.bind(this.root)()">Pending</span>
+            <span ${"#-status"} class="tag is-warning" onclick="this.root.toggle()">Pending</span>
             <span ${"#-text"} class="tag is-info">Todo text</span>
             <a class="tag is-delete is-light" onclick="this.root.applyTransition('removeTodo',this.root.index)"></a>
         </div>
@@ -87,20 +87,23 @@ dfn("my-todo", class extends mxn_todo(StateElement){
 let mxn_container = html`
         ${bulma}
         <style>
-            div.box{
+            div.container{
                 margin:20% auto;
                 max-width: 30rem;
             }            
             .withmargin{
                 margin-top:2rem;
             }
         </style>
+        <div class="container">
+        <span class="subtitle is-4 has-text-info"> ImperaJs</span> <span class="subtitle is-4">Todo App</span>
         <div class ="box" style="padding:3rem">
                 <slot name="head"></slot>
          <div class="withmargin" >
             <div ${"#-content"}></div>
         </div>
         </div>
+        </div>
 `;
 dfn("my-container", class extends mxn_container(StateElement){
         on_todos_update(val){