dna.js

An uncomplicated user interface library

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dna.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dna.min.js"></script>
<h1>To-Do List</h1>
<p>
   <input id=task-title data-enter-key=todo.add value="Make hay" autofocus>
   <button data-click=todo.add>Add Task</button>
</p>
<div class=tasks data-on-load=todo.setup>
   <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>
      <button data-click=dna.down>&darr;</button>
      <button data-click=dna.up>&uarr;</button>
   </div>
</div>
<p data-placeholder=task>Hooray, nothing to do!</p>

CSS

body {
   font-family: sans-serif;
   background-color: white;
   margin: 30px;
   }
input {
   background-color: aliceblue;
   }
.task {
   background-color: lightblue;
   padding: 8px 10px;
   margin-top: 5px;
   }
.task label span {
   transition: color 0.4s;
   }
.task .strike {
   text-decoration: line-through;
   color: gray;
   }
.task button {
   float: right;
   transition: opacity 0.4s;
   }
.task:first-of-type button:nth-child(4),
.task:last-of-type  button:nth-child(3) {
   opacity: 0.5;
   pointer-events: none;
   }

JavaScript

const todo = {
   add: function() {  //create a task
      const task = {
         title: $('#task-title').val(),
         done:  false
         };
      dna.clone('task', task, { fade: true });
      console.log(dna.getModel('task'));  //see model
      },
   setup: function() {  //start with one task
      const task = {
         title: 'Check out: dnajs.org',
         done:  false
         };
      dna.clone('task', task);
      }
   };