javascriptでしょぼい本屋を作ってみた

機能説明

• 本の一覧表示
• 指定した金額以下での検索
• 指定した在庫以下での検索
• 指定した著者名の本検索
• 在庫の本のトータルの金額表示
• トータルの本の在庫量表示

しょぼい本屋なのでこのくらいで勘弁してください。。

    <section id="bookslist">
      <h2>本の一覧表示</h2>
      <ul class="search">
        <li class="all">
          <p>全ての本を表示します</p>
          <button>検索</button>
        </li>

        <li class="price">
          <p>指定した金額以下を調べる</p>
          <input type="text" id="input-price">
        </li>

        <li class="quantity">
          <input type="text">
          <p>指定した在庫以下を調べる</p>
        </li>

        <li class="author">
          <p>一致した著者の本を調べる</p>
          <input type="text">
        </li>
      </ul>

      <h3>検索した結果を返す</h3>
      <div class="lists">

      </div>
    </section>

    <section id="detailbook">
      <h2>本の詳細表示</h2>
      <ul class="search">
        <li>
          <p>トータルの金額</p>
          <button class="total-num">検索</button>
        </li>

        <li>
          <p>トータルの個数</p>
          <button class="total-price">検索</button>
        </li>
      </ul>

      <div class="lists">

      </div>
    </section>

const bookShopFunc = (books) => {
  return {
    title: "タイトル",
    price: "金額",
    quantity: "在庫",
    release_date: "発売日",
    author: "著者",
    // トータルの数量を返す
    totalNum(Compare){
      return books.reduce(Compare, 0)
    },
    inputCompareValue(event, flag) {
      const InputValue = event.target.value;
      if (flag === "price"){
        return books.filter(book => InputValue >= book.price)
      }else if (flag === "quantity") {
        return books.filter(book => InputValue >= book.quantity)
      }else if (flag === "author") {
        return books.filter(book => InputValue === book.author)
      }
    },
    listBtnClick(btn, section, array, html) {
      btn.addEventListener('click', () => {
        section.textContent = null;
        if (!array.length) {
          section.insertAdjacentHTML('beforeend', bookshop.noBookHtml())
          return true;
        }
        array.forEach(book => section.insertAdjacentHTML('beforeend', html(book)))
      });
    },
    listInput (btn, section, html, flag) {
      btn.addEventListener('input', (e)=> {
        const InputValue = e.target.value;
        const array = bookshop.inputCompareValue(e, flag)
        section.textContent = null;
        if (!array.length) {
          section.insertAdjacentHTML('beforeend', bookshop.noBookHtml())
          return;
        }
        array.forEach(book => section.insertAdjacentHTML('beforeend', html(book)))
      });
    },
    targetBtnClick (btn, appendBox, target, html, key) {
      btn.addEventListener("click", () => {
        appendBox.textContent = null;
        if (target === undefined || target === null) {
          appendBox.insertAdjacentHTML('beforeend', bookshop.noBookHtml())
          return;
        }
        appendBox.insertAdjacentHTML("beforeend", html(key, target))
      });
    },
    booksListHtml(book){
      return `<div class="book">
                <p class="book-title">タイトル：${book.title}</p>
              </div>`
    },
    answertHtml(key, target) {
      console.log(key)
      return `<p class="">${key}：${target}</p>`
    },
    noBookHtml() {
      return `<div class="book">
                <p class="no">本は見当たらなかったよ！</p>
              </div>`
    }
  }
}

// オブジェクトの配列を定義
const books = [
  {title: "ハリーポッター", price: 1000, quantity: 100, release_date: '2013/11/27', author: "tanaka"},
  {title: "ハレルヤ", price: 2000, quantity: 300, release_date: '2015/1/20', author: "hirata"},
  {title: "カジカジ", price: 3000, quantity: 200, release_date: '2012/5/10', author: "tanaka"},
  { title: "山が好き", price: 4000, quantity: 300, release_date: '2020/1/20', author: "otsuka"}
];

// インスタンス的な変数
const bookshop = bookShopFunc(books);

// 検索一覧用の変数
const bookList = document.querySelector('#bookslist .lists');
const listBtn = document.querySelector('.search .all button');
const priceInput = document.querySelector('.search .price input');
const quantityInput = document.querySelector('.search .quantity input');
const authorInput = document.querySelector('.search .author input');

// 検索一覧用のイベント
bookshop.listBtnClick(listBtn, bookList, books, bookshop.booksListHtml);
bookshop.listInput(priceInput, bookList, bookshop.booksListHtml, "price");
bookshop.listInput(quantityInput, bookList, bookshop.booksListHtml, "quantity");
bookshop.listInput(authorInput, bookList, bookshop.booksListHtml, "author");

//  金額や在庫数の確認
const detailBook = document.querySelector('#detailbook .lists');
const totalNumBtn = document.querySelector('#detailbook .total-num');
const totalPriceBtn = document.querySelector('#detailbook .total-price');
bookshop.targetBtnClick(totalNumBtn, detailBook, bookshop.totalNum((total, book) => { return total + book.quantity;}), bookshop.answertHtml, bookshop.quantity);
bookshop.targetBtnClick(totalPriceBtn, detailBook, bookshop.totalNum((total, book) => {return total + book.price;}), bookshop.answertHtml, bookshop.price);

今回勉強になったこと

関数を使うのが元々苦手だったのですが引数に関数を入れたり高階関数を扱ってみたりして関数の使い方が少しは分かった気がします。
呼び出しの関数に長いコールバック関数を書いたのは可読性的に微妙な気もするんですがどうなんでしょうか。。。
もっとここはこうでしょ？的なものがありましたら是非コメントお待ちしております。