Display messages on demo

2 files changed, 24 insertions, 2 deletions

diff --git a/browser-demo/demo.js b/browser-demo/demo.js
index 079fbfc..a9da37d 100644
--- a/browser-demo/demo.js
+++ b/browser-demo/demo.js
@@ -3,6 +3,20 @@
         document.getElementById("document"),
         function(result) {
             document.getElementById("output").innerHTML = result.html;
+            
+            var messageHtml = result.messages.map(function(message) {
+                return '<li class="' + message.type + '">' + escapeHtml(message.message) + "</li>";
+            }).join("");
+            
+            document.getElementById("messages").innerHTML = "<ul>" + messageHtml + "</ul>";
         }
     );
+
+    function escapeHtml(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
 })();
diff --git a/browser-demo/index.html b/browser-demo/index.html
index 6056c19..45dcc0a 100644
--- a/browser-demo/index.html
+++ b/browser-demo/index.html
@@ -13,8 +13,16 @@
     </div>
     <div class="container">
       <input id="document" type="file" />
-      <div id="output">
-      </div>
+      <div class="row">
+        <div class="span8">
+          <div id="output" class="well">
+          </div>
+        </div>
+        <div class="span4">
+          <h3>Messages</h3>
+          <div id="messages">
+          </div>
+        </div>
     </div>
     
     <script src="bundle.js"></script>