dna-engine ~~ Book finder

An uncomplicated user interface library

by pilafmon

HTML

<script src="https://cdn.jsdelivr.net/npm/fetch-json@3/dist/fetch-json.min.js"></script>
<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>Book Finder</h2>

<label>
   Search:
   <input data-on-smart-update=findBooks 
      data-on-load=dna.ui.focus placeholder="Enter terms">
</label>
<div class=books>
   <figure id=book class=dna-template>
      <img src=# alt=cover
         data-attr-src=~~volumeInfo.imageLinks.thumbnail~~>
      <figcaption>
         <strong>~~volumeInfo.title~~</strong>
         <p>~~volumeInfo.publisher~~</p>
         <em>~~saleInfo.listPrice.amount~~</em>
      </figcaption>
   </figure>
</div>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }
label input {
   font-size: 1.2rem;
   background-color: mintcream;
   padding: 4px 8px;
   }
figure {
   display: flex;
   background-color: lightblue;
   padding: 10px;
   margin: 10px;
   }
figure img {
   align-self: start;
   width: 80px;
   margin-right: 10px;
   }

JavaScript

// dna-engine.org

const url = 'https://www.googleapis.com/books/v1/volumes';
const findBooks = (elem) => {
   const options = { empty: true, fade: true };
   const handleResults =
      (data) => dna.clone('book', data.items, options);
   fetchJson.get(url, { q: elem.value }).then(handleResults);
   };