dna-engine

            <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna-engine@3.0/dist/dna-engine.css>
         

            <script src=https://cdn.jsdelivr.net/npm/dna-engine@3.0/dist/dna-engine.min.js></script>
         

            $ npm install dna-engine
         

            ...
            "dependencies": {
               "dna-engine": "~3.0"
            }
            ...
         

            import { dna } from 'dna-engine';
         

            // Imports
            import 'dna-engine/dist/dna-engine.css';
            import 'dna-engine';

            // Application
            const myApp = {
               doSomething() {
                  // Business logic goes here
                  },
               setup() {
                  // Initiation code goes here
                  },
               };

            // Initialization
            dna.registerContext('myApp', myApp);  //make application visible to dna-engine
            dna.dom.onReady(myApp.setup);  //call function myApp.setup() once DOM is ready
         

            <p id=book class=dna-template>
         

            <h1>List of Books</h1>
            <section class=books>
               <div id=book class=dna-template>
                  <h2>~~title~~</h2>
               </div>
            </section>
         

            <span>~~title~~</span>
         

            <span>~~[value]~~</span>
         

            <div id=~~code~~>
         

            <label>
               <input type=checkbox data-prop-checked=~~isGift~~>Gift Wrap
            </label>
            <label>
               <input type=checkbox data-prop-checked=~~isExpress~~>Overnight
            </label>
         

            <select data-option=~~category~~>
               <option disabled selected>Select category</option>
               <option value=art>Arts and humanities</option>
               <option value=sci>Science</option>
               <option value=med>Medical</option>
            </select>
         

            {
               category: 'sci',
               categories: [
                  { code: 'art', label: 'Arts and humanities' },
                  { code: 'sci', label: 'Science' },
                  { code: 'med', label: 'Medical' }
               ]
            }
         

            <select data-option=~~category~~>
               <option disabled selected>Select category</option>
               <option data-array=~~categories~~ value=~~code~~>~~label~~</option>
            </select>
         

            <div class=~~type~~>
         

            <div data-class=~~type~~>
         

            <div data-class=~~onSale[highlight,no-highlight]~~>
         

            <div id=book class=dna-template>
               <h2 data-class=~~onSale,highlight,no-highlight~~>~~title~~</h2>
            </div>
         

            const books = [
               { title: 'The DOM',     onSale: true },
               { title: 'Styling CSS', onSale: false }
               ];
            dna.clone('book', books);
         

            <div class=book>
               <h2 class=highlight>The DOM</h2>
            </div>
            <div class=book>
               <h2 class=no-highlight>Styling CSS</h2>
            </div>
         

            <div id=book class=dna-template>
               <h2 id=~~code~~>~~title~~</h2>
               <div data-class=~~type~~>
                  Author: <cite>~~author~~</cite>
               </div>
            </div>
         

            <img src=# data-attr-src=~~url~~ alt=avatar>
         

            Due date:    <input data-attr-type=date  value=~~dueDate~~><br>
            Cover color: <input data-attr-type=color value=~~coverColor~~>
         

            Due date:    <input type=date  value=2017-12-31><br>
            Cover color: <input type=color value=#daa520>
         

            <div id=book class=dna-template>
               <p>Japan:  <span data-format-currency=jpy>~~price~~</span></p>
               <p>Greece: <span data-format-currency100=eur>~~price~~</span></p>
            </div>
         

            <div class=book>
               <p>Japan:  <span>¥2,999</span></p>
               <p>Greece: <span>€29.99</span></p>
            </div>
         

            <div id=event class=dna-template>
               <p>Date: <span data-format-date=general>~~timestamp~~</span></p>
               <p>UTC: <span data-format-date=utc>~~timestamp~~</span></p>
            </div>
         

            <div class=event>
               <p>Date: <span>2030-05-04 1:00am Sat</span></p>
               <p>UTC: <span>Sat, 04 May 2030 08:00:00 GMT</span></p>
            </div>
         

            <div id=book class=dna-template>
               <p>Copies Sold: <span data-format-number=#>~~copiesSold~~</span></p>
               <p>Rating:      <span data-format-number=#.#>~~rating~~</span></p>
            </div>
         

            <div class=book>
               <p>Copies Sold: <span>1,327,842</span></p>
               <p>Rating:      <span>4.0</span></p>
            </div>
         

            <div id=book class=dna-template>
               <p>Score: <span data-format-percent=#>~~score~~</span></p>
               <p>Sales: <span data-format-percent=#.#>~~sales.foreign~~</span></p>
            </div>
         

            <div class=book>
               <p>Score: <span>90%</span></p>
               <p>Sales: <span>12.2%</span></p>
            </div>
         

            <div id=book class=dna-template>
               <p>Title:     <span data-format=app.formatTitle>~~title~~</span></p>
               <p>Character: <span data-format=String.fromCharCode>~~ascii~~</span></p>
            </div>
         

            const app = {
               formatTitle(title) {
                  return `"${title.toUpperCase()}"`;
                  },
               };
            const book = { title: 'Styling CSS', ascii: 8721 };  //sum symbol
            dna.clone('book', books);
         

            <div class=book>
               <p>Title:     <span>"STYLING CSS"</span></p>
               <p>Character: <span>∑</span></p>
            </div>
         

            dna.clone('book', { title: 'The DOM', author: 'Bo' });
         

            <div id=book class=dna-template>
               <p>~~title~~</p>
               <button data-on-click=setFavorite>I Like</button>
            </div>
            <script>
               const setFavorite = (buttonElem) => {
                  dna.getClone(buttonElem).classList.add('favorite');
                  };
               dna.clone('book', { title: 'Go JavaScript!' });
            </script>
         

            <div class=book>
               <p>Go JavaScript!</p>
               <button>I Like</button>
            </div>
         

            <div class="book favorite">
               <p>Go JavaScript!</p>
               <button>I Like</button>
            </div>
         

            const book = { title: 'The DOM', author: 'Bo' };
            const clone = dna.clone('book', book);
            const model = dna.getModel(clone);
            model.title = 'The DOM II';
            dna.refresh(clone);  //updates ui (DOM element) with new title
         

            const book = { title: 'The DOM', author: 'Bo' };
            const clone = dna.clone('book', book);
            const model = dna.getModel(clone);
            model.title = 'The DOM II';
            dna.refresh(clone);  //updates ui (DOM element) with new title
         

            dna.insert('book', { title: 'The DOM', author: 'Bo' });
         

            const book =    { title: 'Interwebz', chapters: ['ARPANET', 'TCP/IP'] };
            const clone =   dna.clone('book', book);
            const options = { fade: true, top: false };
            dna.arrayPush(clone, 'chapters', 'CERN', options);  //append chapter
         

            const books = [
               { title: 'The DOM' },
               { title: 'Go JavaScript!' },
               { title: 'Styling CSS3' }
               ];
            const html =   '<li>~~title~~</li>';
            const holder = document.getElementById('book-list')
            dna.createTemplate('book', html, holder);
            dna.clone('book', books);
         

            <ol id=book-list>
               <li class=book>The Dom</li>
               <li class=book>Go JavaScript!</li>
               <li class=book>Styling CSS3</li>
            </ol>
         

            if (dna.templateExists('book'))
               dna.clone('book', books);
         

            dna.empty('book', { fade: true });
         

            const clone1 = dna.clone('book', { title: 'The DOM' });
            const clone2 = dna.clone('book', { title: 'Styling CSS' });
            dna.getModel(clone1).title = 'The DOM II';    //modified title
            dna.getModel(clone2).title = 'Styling CSS3';  //modified title
            dna.refreshAll('book');  //updates ui with new titles
         

            const books = [
               { title: 'The DOM' },         //count: 1
               { title: 'Go JavaScript!' },  //count: 2
               { title: 'Styling CSS3' }     //count: 3
               ];
            const clones = dna.clone('book', books);
            dna.down(clones.first());   //move "The DOM" to be just after "Go JavaScript!"
            dna.recount(clones.eq(1));  //set "Go JavaScript!" count to 1 and "The DOM" to 2
         

            const clone = dna.clone('book', book);
            dna.destroy(clone, { fade: true });
         

            const books = dna.getClones('book');
         

            <div id=book class=dna-template>
               <p>~~title~~</p>
               <button data-on-click=dna.up>Move Up</button>
               <button data-on-click=dna.down>Move Down</button>
            </div>
         

            <div id=book class=dna-template>
               <p>~~title~~</p>
               <button data-on-click=dna.bye>Delete Book</button>
            </div>
         

            const clone = dna.clone('book', { title: 'The DOM' });
            dna.bye(clone);  //deletes 'The DOM'
         

            dna.registerInitializer(libX.bubbleHelp.setup);
         

            dna.registerInitializer('bootstrapSwitch', '.switch');
            dna.clearInitializers();  //undoes previous line
         

            dna.info();
         

            <div id=book class=dna-template>~~title~~</div>
         

            const books = [
               { title: 'The DOM' },
               { title: 'Interwebz' }
               ];
            dna.clone('book', books);
         

            <div class=book>The DOM</div>
            <div class=book>Interwebz</div>
         

            <div id=book class=dna-template>
               Book: <span>~~title~~</span> by
               <span>
                  <span data-array=~~authors~~>~~[value]~~</span>
               </span>
               <div>
                  <div data-array=~~chapters~~>
                     Chapter: <span>~~header~~</span>
                  </div>
               </div>
            </div>
         

            const book = {
               title:    'Interwebz',
               authors:  ['Ed', 'Jake', 'Abby'],
               chapters: { header: 'ARPANET', header: 'TCP/IP' }
               };
            dna.clone('book', book);
         

            <div class=book>
               Book: <span>Interwebz</span> by
               <span>
                  <span>Ed</span>
                  <span>Jake</span>
                  <span>Abby</span>
               </span>
               <div>
                  <div>
                     Chapter: <span>ARPANET</span>
                  </div>
                  <div>
                     Chapter: <span>TCP/IP</span>
                  </div>
               </div>
            </div>
         

            <div id=book class=dna-template data-title=~~[value]~~>
               <span>~~[count]~~</span>. <span>~~[value]~~</span>
            </div>
         

            const books = ['The DOM', 'Interwebz'];
            dna.clone('book', books);
         

            <div class=book data-title="The DOM">
               <span>1</span>. <span>The DOM</span>
            </div>
            <div class=book data-title="Interwebz">
               <span>2</span>. <span>Interwebz</span>
            </div>
         

            <b>Authors:</b>
            <span id=author class=dna-template data-separator=", ">
               <span>~~name~~</span>
            </span>
            <script>
               const authors = [{ name: 'Ed' }, { name: 'Bo'}, { name: 'Jan' }];
               dna.clone('author', authors);
            </script>
         

            <b>Authors:</b>
            <span id=author class=dna-template>
               <span>~~name~~</span><span class=dna-separator>,</span>
               <span class=dna-last-separator>and</span>
            </span>
         

            <div id=book class=dna-template data-transform=enhanceBook>
               <span>~~title~~</span>
               <img src=star.png alt=star data-true=~~displayStar~~>
            </div>
         

            const enhanceBook = (data) => {
               data.displayStar = data.rating > 3;  //good books get a star
               };
            const books = [
               { title: 'The DOM',   rating: 2 },
               { title: 'Interwebz', rating: 5 }
               ];
            dna.clone('book', books);
         

            <div class=book>
               <span>The DOM</span>
            </div>
            <div class=book>
               <span>Interwebz</span>
               <img src=star.png alt=star>
            </div>
         

            <div id=book class=dna-template>
               <span data-callback=blink>~~title~~<span>
            </div>
         

            const showHide = (elem) =>
               dna.ui.fadeOut(elem).then(dna.ui.fadeIn);
            const blink = (elem) =>
               window.setInterval(showHide, 2000);
         

            <output id=message></output>
            <p>Click:     <button data-on-click=showMsg     value=1>1</button></p>
            <p>Hover in:  <meter  data-on-hover-in=showMsg  value=2 max=4></meter> 2</p>
            <p>Hover out: <meter  data-on-hover-out=showMsg value=3 max=4></meter> 3</p>
            <p>Change:    <input  data-on-change=showMsg    value=4></p>
            <p>Input:     <input  data-on-input=showMsg     value=5></p>
            <p>Key down:  <input  data-on-key-down=showMsg  value=6></p>
            <p>Key up:    <input  data-on-key-up=showMsg    value=7></p>
            <p>Submit:    <input  data-on-enter-key=showMsg value=8></p>
            <p>Focus in:  <input  data-on-focus-in=showMsg  value=9></p>
            <p>Focus out: <input  data-on-focus-out=showMsg value=A></p>
            <script>
               const showMsg = (elem, event) => {
                  const msg =    'Value "' + elem.value + '" on ' + event.type;
                  const output = globalThis.document.getElementById('message');
                  dna.ui.pulse(output, { text: msg });
                  };
            </script>
         

            <input data-on-smart-update=logNow placeholder="Type here">
            <div id=log-message class=dna-template>
               <code data-format-date=timestamp>~~time~~</code>:
               <strong>~~message~~</strong>
            </div>
            <script>
               const logNow = (elem) => {
                  const data =  { time: Date.now(), message: elem.value };
                  const clone = dna.clone('log-message', data, { fade: true });
                  clone.firstElementChild.style.color = 'royalblue';
                  };
            </script>
         

            <button data-href=../tutorial-files/book-finder.html>Book Finder</button>
         

            <h2>Book Information</h2>
            <div id=book class=dna-template>
               Title: <input value=~~title~~ data-on-key-up=bookInfo.update>
               ebook: <input type=checkbox data-prop-checked=~~ebook~~
                  data-on-change=bookInfo.update>
            </div>
            <div>Data: <code id=data>[YOUR MOVE]</code></div>
         

            const bookInfo = {
               update(elem) {
                  const data =     JSON.stringify(dna.getModel(elem));
                  const dataElem = globalThis.document.getElementById('data');
                  dataElem.textContent = data;
                  dna.ui.pulse(dataElem, { duration: null });
                  },
               setup() {
                  const book = { title: 'Styling CSS', ebook: true };
                  dna.clone('book', book);
                  },
               };
            dna.dom.onReady(bookInfo.setup);
         

            const app = {

               setup() {
                  const highlight = (elem) =>
                     elem.style.backgroundColor = 'gold';
                  dna.registerInitializer(highlight);  //highlight each new clone
                  },

               };

            dna.dom.onDomReady(app.setup);
         

            <div id=book class=dna-template>
               <span>~~title~~</span>
               <img src=star.png alt=star data-true=~~displayStar~~>
            </div>
         

            const enhanceBook = (data) => {
               data.displayStar = data.rating > 3;  //good books get a star
               };
            const books = [
               { title: 'The DOM',   rating: 2 },
               { title: 'Interwebz', rating: 5 }
               ];
            dna.clone('book', books, { transform: enhanceBook });
         

            <div class=book>
               <span>The DOM</span>
            </div>
            <div class=book>
               <span>Interwebz</span>
               <img src=star.png alt=star>
            </div>
         

            <div id=book class=dna-template>
               ~~title~~
            </div>
         

            const applyBkgnd = (elem, data) => {
               elem.css({ backgroundImage: data.cover });
               };
            const options = { fade: true, callback: applyBkgnd };
            const book = { title: 'Taskmaster', cover: 'url(cover.png)' };
            dna.clone('book', book, options);
         

            <div class=book style="background-image: url(cover.png);">
               Taskmaster
            </div>
         

            <p data-on-load=doubleBlink data-wait-for=myEventLogger>
               This paragraph will blink twice on page load!
            </p>
            <script>
               const doubleBlink = (elem) => {
                  dna.ui.fadeOut(elem)
                     .then(dna.ui.fadeIn)
                     .then(dna.ui.fadeOut)
                     .then(dna.ui.fadeIn)
                     .then(() => myEventLogger('Double blink happened'));
                  };
            </script>
         

            <div id=book class=dna-template>
               First Name: <span>~~author.first~~</span>
            </div>
         

            const book = {
               title: 'The DOM',
               author: { first: 'Bo', last: 'Smith' }
               };
            dna.clone('book', book);
         

            <div class=book>
               First Name: <span>Bo</span>
            </div>
         

            <ol class=books>
               <li id=book class=dna-template>~~title~~</li>
            </ol>
            <p data-placeholder=book>No books</p>
         

            <div id=book class=dna-template>
               <span data-require=~~title~~>~~title~~</span>
               <span data-missing=~~title~~>[not found]</span>
            </div>
         

            const books = [
               { author: 'Bo', title: 'The DOM' },
               { author: 'Jan' }
               ];
            dna.clone('book', books);
         

            <div class=book>
               <span>The DOM</span>
            </div>
            <div class=book>
               <span>[not found]</span>
            </div>
         

            <p class=warning data-true=~~overdue~~>Invoice past due!</p>
         

            const invoice = { amount: 125.00, due: 'April 3, 2015' },
            invoice.overdue = new Date(invoice.due).getTime() < Date.now();
            dna.clone('invoice', invoice);
         

            <section data-component=bookshelf class=dna-hide>
               <h2>Bookshelf</h2>
               <div class=books>
                  <h3 id=book class=dna-template>~~title~~</h3>
               </div>
            </section>
         

            [data-component=bookshelf] .my-books .my-book {
               max-width: 400px;
               background-color: plum;
               padding: 5px 15px;
               margin-bottom: 15px;
               }
         

            <div data-component=bookshelf data-on-load=bookshelf.setup>
               <h2>Bookshelf</h2>
               <section class=my-books>
                  <div id=my-book class=dna-template>
                     <h3>~~title~~</h3>
                     Author: <cite>~~author~~</cite>
                  </div>
               </section>
               <button data-on-click=bookshelf.show>Show component name</button>
               <script>
                  const bookshelf = {
                     booksUrl: 'https://dna-engine.org/api/books/',
                     show(elem, event, component) {
                        elem.textContent = component.dataset.component + '!';
                        },
                     setup(elem) {
                        const handle = (data) => dna.clone('my-book', data);
                        fetchJson.get(bookshelf.booksUrl).then(handle);
                        },
                     };
               </script>
            </div>
         

            <nav class=dna-menu data-callback=myApp.updatePanel>
               <span>Menu item #1</span>
               <span>Menu item #2</span>
               <span>Menu item #3</span>
            </nav>
            <div class=dna-panels>
               <section>Content of panel #1</section>
               <section>Content of panel #2</section>
               <section>Content of panel #3</section>
            </div>
         

            <nav class=dna-menu data-menu-nav=author-info>
               <span>Menu item #1</span>
               <span>Menu item #2</span>
               <span>Menu item #3</span>
            </nav>
            <meter value=7 min=0 max=10></meter>
            <div class=dna-panels data-menu-nav=author-info>
               <section>Content of panel #1</section>
               <section>Content of panel #2</section>
               <section>Content of panel #3</section>
            </div>
         

            [data-component=author] {
               .dna-menu {
                  list-style-type: none;
                  padding: 0px;
                  margin-top: 10px;
                  .dna-menu-item {
                     display: inline;
                     background-color: lightskyblue;
                     border: 2px solid silver;
                     border-radius: 5px;
                     padding: 5px 10px;
                     transition: all 400ms;
                     &.dna-selected, &:hover {
                        border-color: dimgray;
                        }
                     }
                  }
               }
         

            <div data-component=author>
               <h2>Author Information</h2>
               Select:
               <ul class=dna-menu data-menu-nav=author-info>
                  <li>Jake</li>
                  <li>Abby</li>
                  <li>Ed</li>
               </ul>
               <div class=dna-panels data-menu-nav=author-info>
                  <section>
                     <h5>Name: Jake</h5>
                     <p>Publisher: O'Reilly</p>
                     <p>Agent: William and Associates</p>
                  </section>
                  <section>
                     <h5>Name: Abby</h5>
                     <p>Publisher: Addison-Wesley</p>
                     <p>Agent: Pro Reps</p>
                  </section>
                  <section>
                     <h5>Name: Ed</h5>
                     <p>Publisher: ASM International</p>
                     <p>Agent: Feven</p>
                  </section>
               </div>
            </div>
         

            <div data-component=book-catalog data-on-load=bookCatalog.setup>
               <h2>Book Catalog</h2>
               <nav class=dna-menu data-menu-nav=book-catalog>
                  <button id=book-menu-item class=dna-template>
                     ~~[count]~~
                  </button>
               </nav>
               <div class=dna-panels data-menu-nav=book-catalog>
                  <section id=book-panel class=dna-template
                        data-transform=bookCatalog.addCover>
                     <h4>~~title~~</h4>
                     <img src=# data-attr-src=~~cover~~ alt=cover>
                  </section>
               </div>
               <script>
                  const bookCatalog = {
                     data: [
                        { id: 'RLG21IfQDckC', title: 'Designing Apps' },
                        { id: '_xB0PyT9Y24C', title: 'CSS3 Guide' },
                        { id: 'PXa2bby0oQ0C', title: 'The Good Parts' },
                        { id: '9U5I_tskq9MC', title: 'Eloquent JavaScript' },
                        { id: '3TJwDwAAQBAJ', title: 'Mastering SVG' },
                        ],
                     addCover(data) {
                        data.cover = 'https://books.google.com/books/content?id=' +
                           data.id + '&printsec=frontcover&img=1&zoom=1';
                        },
                     setup() {
                        dna.clone('book-menu-item', bookCatalog.data);
                        dna.clone('book-panel',     bookCatalog.data);
                        },
                     };
               </script>
            </div>
         

               <h2>Publishers</h2>
               <nav class=dna-menu data-menu-nav=publisher-info data-callback=updatePanel>
                  <button>Pearson</button>
                  <button>Shueisha</button>
                  <button>Wiley</button>
               </nav>
               <div class=dna-panels data-menu-nav=publisher-info>
                  <section data-hash=pearson>
                     <h2>Pearson</h2>
                     <p>UK</p>
                  </section>
                  <section data-hash=shueisha>
                     <h2>Shueisha</h2>
                     <p>Japan</p>
                  </section>
                  <section data-hash=wiley>
                     <h2>Wiley</h2>
                     <p>US</p>
                  </section>
               </div>
         

            const updatePanel = (panel, hash) => {
               // Apply new random color to the panel border on each view
               const colors = ['aqua', 'gold', 'lime', 'red', 'tan'];
               panel.style.borderColor = colors[Date.now() % colors.length];
               };
         

               <h2>Book format</h2>
               <nav class=dna-menu data-menu-nav=book-format data-style=flat-tabs>
                  <span>Hardcover</span>
                  <span>Paperback</span>
                  <span>eBook</span>
               </nav>
               <div class=dna-panels data-menu-nav=book-format>
                  <p>Hardcovers are the nicest.</p>
                  <p>Paperbacks are the easiest.</p>
                  <p>EBooks are the future.</p>
               </div>
         

               <h2>Book type</h2>
               <nav class=dna-menu data-menu-nav=book-type data-style=pillbox-tabs>
                  <span>Action</span>
                  <span>Mystery</span>
                  <span>Science Fiction</span>
               </nav>
               <div class=dna-panels data-menu-nav=book-type>
                  <p>Action books</p>
                  <p>Mystery books</p>
                  <p>Science fiction books are the best!</p>
               </div>
         

            const things = [
               { code: 'a', word: 'Ant' },
               { code: 'b', word: 'Bat' },
               ];
            const x = dna.array.find(things, 'b');  //{ index: 1, item: { code: 'b', word: 'Bat' } }
            const y = dna.array.find(things, 'b').index;  //1
            const z = dna.array.find(things, 'x');  //{ index: -1, item: null }
         

            const map = {
               a: { word: 'Ant' },
               b: { word: 'Bat' },
               };
            const array = dna.array.fromMap(map);
            // New array:
            //    [{ code: 'a', word: 'Ant' }, { code: 'b', word: 'Bat' }]
         

            const words = [
               { code: 'a', word: 'Ant' },
               { code: 'b', word: 'Bat' },
               ];
            const wordMap = dna.array.toMap(words);
            // wordMap:
            //    { a: { code: 'a', word: 'Ant' }, b: { code: 'b', word: 'Bat' } }
         

            const a = dna.pageToken.get('favorite', 0);  //a === 0
            dna.pageToken.put('favorite', 7);
            const b = dna.pageToken.get('favorite', 0);  //b === 7
         

            <label>
               <span>Start typing:</span>
               <input data-on-load=dna.ui.focus>
            </label>
         

            const msgElem = document.getElementById('msg');
            msg.textContent = 'Error!';
            dna.ui.pulse(msgElem);  //simple flash effect and slow fade out
         

            const boxes = document.getElementsByClass('box');
            dna.ui.slideFadeIn(boxes[0]);      //shows the 1st box
            dna.ui.slideFadeDelete(boxes[1]);  //removes the 2nd box
         

            Number of chapters:<br>
            <input type=range value=10
               data-on-load=makeChapters data-on-change=smooth>
            <div id=smooth-container>
               <button id=chapter-box class=dna-template>~~[count]~~</button>
            </div>
            <script>
               const makeChapters = (range) => {
                  const options = { empty: true, clones: +range.value };
                  dna.clone('chapter-box', {}, options);
                  };
               const smooth = (range) => {
                  const container = document.getElementById('smooth-container');
                  const updateUI =  () => makeChapters(range);
                  dna.ui.smoothHeight(updateUI, { container: container, transition: 2000 });
                  };
            </script>
         

            <ol>
               <li>The DOM</li>
               <li id=favorite>Go JavaScript!</li>
               <li>Styling CSS3</li>
            </ol>
            <script>
               const elem = document.getElementById('favorite');
               dna.ui.smoothMove(elem, true);
            </script>
         

            dna.util.apply('app.cart.buy', [7]);                //app.cart.buy(7);
            dna.util.apply(Math.max, [7, 21, -3]);              //21;
            const elem = document.getElementById('user007');
            dna.util.apply('dna.ui.smoothMove', [elem, true]);  //dna.ui.smoothMove(elem, true);
         

            const data = { cart: { items: 7 } };
            dna.util.assign(data, 'cart.items', 8);
            // New data: { cart: { items: 8 } }
         

            const buyFn = dna.util.getFn('app.cart.buy');
            buyFn(7);  //equivalent to executing: app.cart.buy(7);
         

            return dna.util.isObj(it) ? it : { value: it };  //always returns an object
         

            dna.util.printf('%s: %s', 'Lives', 3);  //'Lives: 3'
         

            dna.util.realTruth('F');  //false
         

            dna.util.toCamel('ready-set-go');  //'readySetGo'
         

            dna.util.toKebab('readySetGo');  //'ready-set-go'
         

            const data = { cart: { items: 7 } };
            const count = dna.util.value(data, 'cart.items');  //7