dna-engine ~~ Live data model

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>
<h2>☯️ Live Model</h2>
<p>
   Type in either of the two text fields, and the model is
   automatically updated.
</p>

<div id=live-model class=dna-template>
   <input value=~~myText~~>
   <code>~~myText~~</code>
   <b data-true=~~myText~~>✅ <i>True that!</i></b>
   <b data-false=~~myText~~>⛔ <i>No dice!</i></b>
</div>

<p>
   Example "falsey" values:
   <b>false</b>, <b>F</b>, <b>no</b>, <b>N</b>, and <b>0</b>
</p>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }
.live-model {
   font-size: 1.4rem;
   background-color: plum;
   padding: 10px 20px;
   margin-bottom: 15px;
   }
.live-model input {
   display: block;
   font-size: 1.4rem;
   background-color: mintcream;
   }
.live-model code {
   display: inline-block;
   min-width: 5em;
   }

JavaScript

// dna-engine.org

const setupLiveModel = () => {
   const model = [
      { myText: 'True' },
      { myText: 'False' },
      ];
   dna.clone('live-model', model);
   const input = document.querySelector('.live-model input');
   input.select();
   input.focus();
   };

dna.dom.onReady(setupLiveModel);