Todo app

examples/todomvc/resources/public/todos.css

@@ -211,6 +211,12 @@ label[for='toggle-all'] {
 	text-decoration: line-through;
 }
 
+#todo-list li .created {
+  font-size: 14px;
+  float: right;
+  word-break: break-all;
+}
+
 #todo-list li .destroy {
 	display: none;
 	position: absolute;

examples/todomvc/src/todomvc/db.cljs

@@ -22,7 +22,8 @@
 (s/def ::id int?)
 (s/def ::title string?)
 (s/def ::done boolean?)
-(s/def ::todo (s/keys :req-un [::id ::title ::done]))
+(s/def ::date #(instance? js/Date (js/Date. %)))
+(s/def ::todo (s/keys :req-un [::id ::title ::done ::date]))
 (s/def ::todos (s/and                                       ;; should use the :kind kw to s/map-of (not supported yet)
                  (s/map-of ::id ::todo)                     ;; in this map, each todo is keyed by its :id
                  #(instance? PersistentTreeMap %)           ;; is a sorted-map (not just a map)

examples/todomvc/src/todomvc/events.cljs

@@ -87,7 +87,7 @@
   ;; The "path" interceptor in `todo-interceptors` means 1st parameter is :todos
   (fn [todos [text]]
     (let [id (allocate-next-id todos)]
-      (assoc todos id {:id id :title text :done false}))))
+      (assoc todos id {:id id :title text :done false :date (.getTime (js/Date.))}))))
 
 
 (reg-event-db

examples/todomvc/src/todomvc/views.cljs

@@ -26,7 +26,7 @@
 (defn todo-item
   []
   (let [editing (reagent/atom false)]
-    (fn [{:keys [id done title]}]
+    (fn [{:keys [id done title date]}]
       [:li {:class (str (when done "completed ")
                         (when @editing "editing"))}
         [:div.view
@@ -36,7 +36,9 @@
              :on-change #(dispatch [:toggle-done id])}]
           [:label
             {:on-double-click #(reset! editing true)}
-            title]
+            title
+            [:span.created
+             (.toDateString (js/Date. date))]]
           [:button.destroy
             {:on-click #(dispatch [:delete-todo id])}]]
         (when @editing