dna.js Template Cloner

An uncomplicated user interface library

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/dna.js/0/dna.css">
<script src="https://cdn.jsdelivr.net/dna.js/0/dna.min.js"></script>
<input id=task-title data-enter-key=todo.add value="Make hay">
<button data-click=todo.add>Add Task</button>

<h2>To-Do List</h2>
<div id=task class=dna-template>
   <label>
      <input type=checkbox data-prop-checked=~~done~~>
      <span data-class=~~done,strike~~>~~title~~</span>
   </label>
   <button data-click=dna.bye>&times;</button>
</div>
<div data-placeholder=task>Hooray, nothing to do!</div>

CSS

body {
   font-family: sans-serif;
   margin: 30px;
   }
.task {
   background-color: lightblue;
   padding: 8px 10px;
   margin-top: 5px;
   }
.task span {
   transition: color 0.5s ease;
   }
.task .strike {
   text-decoration: line-through;
   color: gray;
   }
.task button {
   float: right;
   }

JavaScript

// To-Do Application using dna.js
var todo = {
   add: function() {  //create task
      var task = { title: $('#task-title').val() };
      dna.clone('task', task, { fade: true });
      },
   setup: function() {  //start with one task
      var task = {
         title: 'Check out: dnajs.org',
         done:  false
         };
      dna.clone('task', task);
      }
   };

$(todo.setup);