support completing items

examples/cordova/platforms/ios/www/css/index.css

@@ -49,10 +49,30 @@ body {
     height:100%;                   /* text area height */
     width:100%;                   /* text area width */
     padding:34px 10px 10px 10px;
-    text-align:center;
+    text-align:left;
     margin:0px;
 }
 
+.todoContainer {
+    overflow: auto;
+}
+
+.todoContainer:after {
+    content: "";
+    display: table;
+    float: none;
+}
+
+.todoItem {
+    display: inline-block;
+}
+
+.deleteButton {
+    float:right;
+    margin-right: 20px;
+}
+
+
 /* Landscape layout (with min-width) */
 @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
     .app {

examples/cordova/platforms/ios/www/index.html

@@ -28,7 +28,7 @@
             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                 * Enable inline JS: add 'unsafe-inline' to default-src
         -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

examples/cordova/platforms/ios/www/js/index.js

@@ -29,11 +29,19 @@ function realm() {
     return new Realm({schema: [Todo]});
 }
 
+function deleteTodo(index) {
+    realm().write(function() {
+        realm().delete(realm().objects("Todo")[index]);
+    });
+    updateItems();
+}
+
 function updateItems() {
     var itemsHTML = "";
     var todos = realm().objects("Todo");
     for (var todo in todos) {
-        itemsHTML += "<div>" + todos[todo].text + "</div>";
+        itemsHTML += "<div class='todoContainer'><div class='todoItem'>" + todos[todo].text + 
+            "</div><button class='deleteButton' onclick='deleteTodo(" + todo + ");'>complete</button></div>";
     }
 
     var items = document.getElementById('items');

examples/cordova/www/css/index.css

@@ -49,10 +49,30 @@ body {
     height:100%;                   /* text area height */
     width:100%;                   /* text area width */
     padding:34px 10px 10px 10px;
-    text-align:center;
+    text-align:left;
     margin:0px;
 }
 
+.todoContainer {
+    overflow: auto;
+}
+
+.todoContainer:after {
+    content: "";
+    display: table;
+    float: none;
+}
+
+.todoItem {
+    display: inline-block;
+}
+
+.deleteButton {
+    float:right;
+    margin-right: 20px;
+}
+
+
 /* Landscape layout (with min-width) */
 @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
     .app {

examples/cordova/www/index.html

@@ -28,7 +28,7 @@
             * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                 * Enable inline JS: add 'unsafe-inline' to default-src
         -->
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

examples/cordova/www/js/index.js

@@ -29,11 +29,19 @@ function realm() {
     return new Realm({schema: [Todo]});
 }
 
+function deleteTodo(index) {
+    realm().write(function() {
+        realm().delete(realm().objects("Todo")[index]);
+    });
+    updateItems();
+}
+
 function updateItems() {
     var itemsHTML = "";
     var todos = realm().objects("Todo");
     for (var todo in todos) {
-        itemsHTML += "<div>" + todos[todo].text + "</div>";
+        itemsHTML += "<div class='todoContainer'><div class='todoItem'>" + todos[todo].text + 
+            "</div><button class='deleteButton' onclick='deleteTodo(" + todo + ");'>complete</button></div>";
     }
 
     var items = document.getElementById('items');