dna-engine ~~ Smart Update

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>Smart Update</h1>
<p>Enables throttling REST calls during live editing</p>

<input data-on-smart-update=app.submit
   data-on-load=dna.ui.focus
   placeholder="Type out some speedy words of wisdom">

<output>
   <code id=log-msg class=dna-template>
      <span>~~timer~~</span>:
      <span>~~message~~</span>
   </code>
</output>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 20px;
   }
input {
   width: 90%;
   font-size: 1.4rem;
   background-color: aliceblue;
   padding: 3px 8px;
   margin-bottom: 20px;
   }
.log-msg {
   display: block;
   background-color: lightblue;
   }
.log-msg span:first-child {
   display: inline-block;
   width: 5em;
   font-weight: bold;
   text-align: right;
   }

JavaScript

// dna-engine.org

const app = {
   start: Date.now(),
   submit(elem) {
      // Put your REST call here.
      const logMsg = {
         timer:   Date.now() - app.start,
         message: elem.value,
         };
      const options = { top: true, fade: true };
      dna.clone('log-msg', logMsg, options);
      },
   };