examples

dynamic

progressive enhancement

bookshelf sorting

A progressively enhanced bookshelf sorter. The initial view comes directly from the HTML on the page which you can see in the view html details below.
For reference, the b.qs() and b.qsa() methods are shortcuts to document.querySelector() and document.querySelectorAll().

Assassin's Apprentice

Hobb, Robin

Dune

Herbert, Frank

Fool

Moore, Christopher

Information Dashboard Design

Few, Stephen

The Long Way to a Small, Angry Planet

Chambers, Becky

On Writing: A Memoir of the Craft

King, Stephen

view html

<div class="bookshelf">
  <div data-r="sort">
    <div class="book">
      <img src="/images/book-covers/assassins-apprentice.jpg" alt="The cover of the book Assassin's Apprentice" />
      <div>
        <div><span class="title">Assassin's Apprentice</span></div>
        <div class="author">Hobb, Robin</div>
      </div>
    </div>

    <div class="book">
      <img src="/images/book-covers/dune.jpg" alt="The cover of the book Dune" />
      <div>
        <div><span class="title">Dune</span></div>
        <div class="author">Herbert, Frank</div>
      </div>
    </div>

    <div class="book">
      <img src="/images/book-covers/fool.jpg" alt="The cover of the book Fool" />
      <div>
        <div><span class="title">Fool</span></div>
        <div class="author">Moore, Christopher</div>
      </div>
    </div>

    <div class="book">
      <img src="/images/book-covers/information-dashboard-design.jpg" alt="The cover of the book The Long Way to a Information Dashboard Design" />
      <div>
        <div><span class="title">Information Dashboard Design</span></div>
        <div class="author">Few, Stephen</div>
      </div>
    </div>

    <div class="book">
      <img src="/images/book-covers/long-way.jpg" alt="The cover of the book The Long Way to a Small, Angry Planet" />
      <div>
        <div>The <span class="title">Long Way to a Small, Angry Planet</span></div>
        <div class="author">Chambers, Becky</div>
      </div>
    </div>

    <div class="book">
      <img src="/images/book-covers/on-writing.jpg" alt="The cover of the book On Writing: A Memoir of the Craft" />
      <div>
        <div><span class="title">On Writing: A Memoir of the Craft</span></div>
        <div class="author">King, Stephen</div>
      </div>
    </div>
  </div>

  <div data-r="controls"></div>
</div>


<script data-template="controls" type="text/html">
  <div>Sort by</div>
  <label><input type="radio" data-s="sort" name="sorter" value="title" data-listen="input" checked> Title</label>
  <label><input type="radio" data-s="sort" name="sorter" value="author" data-listen="input"> Author</label>
</script>

javascript

export const b = { init: "controls" };

export function controls(_, __, el) {
  el.replaceChildren(b.render("controls"));
}

export function sort(ev, __, el) {
  const books = [...b.qsa(".book", el)]
    .sort((alfa, bravo) => {
      return b.qs(`.${ev.target.value}`, alfa).textContent.localeCompare(
        b.qs(`.${ev.target.value}`, bravo).textContent,
      );
    });
  el.replaceChildren(...books);
}

styles

.book {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: 4rem 1fr;  
  margin-bottom: 0.4rem;

  img {
    grid-row: span 2;
  }
}

.bookshelf {
  display: grid;
  grid-template-columns: 1fr 8rem;
}

label {
  display: block;
}