dna.js ~~ Book finder

An uncomplicated user interface library

by pilafmon

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch-json.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dna.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dna.min.js"></script>
<h2>Book Finder</h2>

<label>
   Search:
   <input data-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

// dnajs.org

const findBooks = (elem) => {
   const url =     'https://www.googleapis.com/books/v1/volumes';
   const terms =   elem.val();
   const params =  { q: terms };
   const options = { empty: true, fade: true };
   const handle =  (data) => dna.clone('book', data.items, options);
   fetchJson.get(url, params).then(handle);
   console.log(terms);  //view user input in the console
   };