dna-engine ~~ To-Do List

An uncomplicated user interface library

by pilafmon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.css">
<script src="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.min.js"></script>
<h1>🗒️ To-Do List</h1>
<p>
   <input id=task-title value="Launch 🚀" data-on-enter-key=todo.add>
   <button data-on-click=todo.add>Add Task</button>
</p>
<div class=tasks>
   <div id=task class=dna-template>
      <label>
         <input type=checkbox data-prop-checked=~~done~~>
         <span data-class=~~done,strike~~>~~title~~</span>
      </label>
      <nav>
         <button data-on-click=dna.down>&darr;</button>
         <button data-on-click=dna.up>&uarr;</button>
         <button data-on-click=dna.bye>&times;</button>
      </nav>
   </div>
</div>
<p data-placeholder=task>Hooray, nothing to do!</p>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }
p input {
   font-size: 1.2rem;
   background-color: aliceblue;
   padding: 3px 8px;
   }
.tasks .task {
   display: flex;
   justify-content: space-between;
   background-color: lightblue;
   padding: 8px 10px;
   margin: 0px 0px 10px 0px;
   }
.tasks .task label span {
   transition: color 400ms;
   }
.tasks .task label span.strike {
   text-decoration: line-through;
   color: gray;
   }
.tasks .task nav button {
   transition: opacity 400ms;
   }
.tasks .task:first-of-type nav button:nth-child(2),
.tasks .task:last-of-type  nav button:nth-child(1) {
   opacity: 0.5;
   pointer-events: none;
   }

JavaScript

// dna-engine.org

const todo = {
   add() {  //create a task
      const task = {
         title: document.getElementById('task-title').value,
         done:  false,
         };
      dna.clone('task', task, { fade: true });
      console.log(dna.getModel('task'));  //see model
      },
   setup() {  //start with one task
      const task = {
         title: 'Check out: 🧬 dna.js.org',
         done:  false,
         };
      dna.clone('task', task);
      document.getElementById('task-title').focus();
      },
   };

dna.dom.onReady(todo.setup);