add demo to page

README.md

@@ -118,7 +118,7 @@ class BoxContainer extends Tonic {
   render (props) {
     return `
       <div ${this.id} style="${this.style}">
-        Container ${box.render(props)}
+        Box Container ${box.render(props)}
       </div>
     `
   }

demo.js → demo/index.js

@@ -1,13 +1,15 @@
-const Tonic = require('.')
+const Tonic = require('..')
 
 class Box extends Tonic {
   constructor (props) {
     super(props)
 
     this.style = `
-      border: 1px solid red;
+      border: 1px dotted #666;
       height: 100px;
       width: 100px;
+      margin: 20px auto;
+      line-height: 90px;
     `
   }
 
@@ -22,7 +24,7 @@ class Box extends Tonic {
 
   render (props) {
     return `
-      <div ${this.id()} style="${this.style}">
+      <div ${this.id} style="${this.style}">
         Box (${props.n})
       </div>
     `
@@ -36,25 +38,28 @@ class Container extends Tonic {
     super(props)
 
     this.style = `
-      border: 1px solid blue;
+      user-select: none;
+      border: 1px solid #999;
       height: 200px;
       width: 200px;
+      padding: 20px;
+      margin: auto;
+      text-align: center;
     `
   }
 
   click (e) {
     box.setProps({ n: Math.random().toString(16).slice(2, 4) })
-    // ...or this.setProps()
   }
 
   render (props) {
     return `
-      <div ${this.id()} style="${this.style}">
-        Container ${box.render(props)}
+      <div ${this.id} style="${this.style}">
+        Box Container ${box.render(props)}
       </div>
     `
   }
 }
 
-const container = new Container({ n: 100 })
-container.attach(document.body)
+const container = new Container({ n: '0f' })
+container.insert(document.querySelector('#demo'))

docs/index.html

@@ -37,6 +37,10 @@
         display: table;
       }
 
+      #demo * {
+        font: 16px 'Inconsolata', monospace;
+      }
+
       .col {
         width: 50%;
         display: table-cell;
@@ -177,12 +181,12 @@
   // old Javascript event object.
   //</i>
   mouseover (e) {
-    e.target.style.backgroundColor = '#aaa'
+    e.target.style.backgroundColor = someRandomColor
   }
 
   <i>// 
-  // You can test if the element that was clicked matches a
-  // selector by using the <b>Tonic.match()</b> method.
+  // If you wanted, you could test if the event target
+  // clicked matches a selector by using <b>Tonic.match()</b>.
   //</i>
   mouseout (e) {
     if (!Tonic.match(e.target, '.box')) return
@@ -245,7 +249,7 @@
     // Set state on a component instance or on this instance,
     // <b>setProps()</b> will cause a downward cascade of re-rendering.
     //</i>
-    box.setProps({ n: someRandomNumber })
+    box.setProps({ n: someRandomString })
   }
 
   <i>//
@@ -256,7 +260,7 @@
   render (props) {
     return `
       &lt;div ${this.id} style="${this.style}"&gt;
-        Container ${box.render(props)}
+        Box Container ${box.render(props)}
       &lt;/div&gt;
     `
   }
@@ -275,7 +279,10 @@
 
 </pre>
 
-        <p class="center">The render method will return a string.</p>
+        <p class="center">Demo (click and hover).</p>
+        <div id="demo"></div>
+
+        <p class="center">Rendering from a server.</p>
         <pre><code>
 http.createServer((req, res) => {
   const container = new BoxContainer({ n: 100 })
@@ -308,5 +315,6 @@
 
       <p class="center">More details on <a href="https://github.com/hxoht/tonic">Github</a></p>
     </main>
+    <script src="bundle.js"></script>
   </body>
 </html>