dna.js ~~ Add a book

An uncomplicated user interface library

by pilafmon

HTML

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

<button data-click=store.add>Add a book</button>
<button data-click=store.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

// dnajs.org

const store = {
   books: [
      { title: 'JavaScript!', author: 'Jake' },
      { title: 'CSS3!',       author: 'Abby' },
      { title: 'HTML5!',      author: 'Ed' }
      ],
   add: () => {  //get next book then clone it
      const i = $('.book').length % store.books.length;
      const options = { fade: true };
      dna.clone('book', store.books[i], options);
      },
   clear: () => {
      dna.empty('book', { fade: true });
      }
   };

$(store.add);  //start off with one book