dna-engine ~~ Add a book

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>Featured Books</h1>

<button data-on-click=bookstore.add>Add a book</button>
<button data-on-click=bookstore.clear>Clear list</button>

<div id=book class=dna-template>
   <h2>~~title~~</h2>
   Author: <b>~~author~~</b>
</div>

CSS

body {
   font-family: system-ui, sans-serif;
   background-color: lightblue;
   margin: 10px 40px;
   }
.book {
   background-color: gold;
   padding: 10px;
   margin-top: 15px;
   }
.book h2 {
   font-size: 1.2rem;
   margin: 0px;
   }

JavaScript

// dna-engine.org

const bookstore = {
   catalog: [
      { title: 'JavaScript!', author: 'Jake' },
      { title: 'CSS3!',       author: 'Abby' },
      { title: 'HTML5!',      author: 'Ed' },
      ],
   add() {  //get random book and clone it
      const i =    Date.now() % bookstore.catalog.length;
      const book = bookstore.catalog[i];
      dna.clone('book', book, { fade: true });
      },
   clear() {
      dna.empty('book', { fade: true });
      },
   };

bookstore.add();  //start off with one book