Krishan-Mishra · Krishan-Mishra · Sep 13, 2023 · Sep 13, 2023 · Sep 14, 2023 · Sep 19, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: 'airbnb-base',
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [
+        '.eslintrc.{js,cjs}',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/display_books_promise.js b/display_books_promise.js
@@ -0,0 +1,66 @@
+let bookData = [];
+
+const insertDataInHtml = (data) => {
+  data.sort((a, b) => a.price - b.price);
+  const tableBody = document.getElementById('table-all-books');
+  tableBody.innerHTML = '';
+  const headerRow = document.createElement('tr');
+  headerRow.innerHTML = `
+    <th>BookId</th>
+    <th>Genre</th>
+    <th>Price</th>
+    <th>Examine</th>
+   `;
+  tableBody.appendChild(headerRow);
+  data.forEach((book) => {
+    const row = document.createElement('tr');
+    row.innerHTML = `
+       <th>${book.bookId}</th>
+       <th>${book.genre}</th>
+       <th>${book.price}</th>
+      `;
+    tableBody.appendChild(row);
+  });
+};
+
+fetch('random_books.json')
+  .then((response) => response.json())
+  .then((data) => {
+    BookData = data;
+    insertDataInHtml(BookData);
+  })
+  .catch((error) => console.log(error));
+
+const searchByIdButton = (evt) => {
+  evt.preventDefault();
+  const idValue = document.getElementById('input-search-id').value;
+  if (!idValue.trim().length) return;
+  const matchingBooks = BookData.filter(
+    (book) => book.bookId.toString() === idValue,
+  );
+  insertDataInHtml(matchingBooks);
+};
+
+const searchByGenreButton = (evt) => {
+  evt.preventDefault();
+  const genreValue = document.getElementById('input-search-genre').value;
+  if (!genreValue.trim().length) return;
+  const matchingBooks = BookData.filter(
+    (book) => book.genre.toString() === genreValue,
+  );
+  insertDataInHtml(matchingBooks);
+};
+
+const searchByPriceButton = (evt) => {
+  evt.preventDefault();
+  const priceValue = document.getElementById('input-search-price').value;
+  if (!priceValue.trim().length) return;
+  const matchingBooks = BookData.filter(
+    (book) => book.price.toString() === priceValue,
+  );
+  insertDataInHtml(matchingBooks);
+};
+
+document.getElementById('btn-search-id').addEventListener('click', searchByIdButton);
+document.getElementById('btn-search-genre').addEventListener('click', searchByGenreButton);
+document.getElementById('btn-search-price').addEventListener('click', searchByPriceButton);
diff --git a/generate_books.js b/generate_books.js
@@ -0,0 +1,32 @@
+const fs = require('fs');
+const faker = require('faker');
+
+class Book {
+  constructor() {
+    this.bookList = [];
+    this.genres = [
+      'Fiction',
+      'Mystery',
+      'Science Fiction',
+      'Fantasy',
+      'Romance',
+      'Thriller',
+    ];
+  }
+
+  generateRandomBook() {
+    for (let index = 1; index <= 100; index += 1) {
+      this.bookList.push({
+        bookId: index,
+        price: Math.floor(Math.random()*1000),
+        genre: this.genres[Math.floor(Math.random() * this.genres.length)],
+      });
+    }
+  }
+}
+
+const book = new Book();
+book.generateRandomBook();
+
+const jsonContent = JSON.stringify(book.bookList, null, 2);
+fs.writeFileSync('random_books.json', jsonContent);
diff --git a/index.html b/index.html
@@ -0,0 +1,103 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"/>
+
+    <title>Book Catalog</title>
+  </head>
+
+  <body>
+    <div
+      id="div-search-price"
+      class="container"
+      style="margin-bottom: 20px; padding-top: 20px">
+      <h3>Search Book By Id</h3>
+      <form action="#">
+        <input
+          type="text"
+          id="input-search-id"
+          class="form-control"
+          style="width: 25%; display: inline" />
+        <button id="btn-search-id" class="btn" type="submit">
+          Search Product
+        </button>
+      </form>
+    </div>
+
+    <div
+      id="div-search-genre"
+      class="container"
+      style="margin-bottom: 20px; padding-top: 20px">
+
+      <h3>Search Book By Genre</h3>
+      <form action="#">
+        <input
+          type="text"
+          id="input-search-genre"
+          class="form-control"
+          style="width: 25%; display: inline"/>
+        <button id="btn-search-genre" class="btn" type="submit">
+          Search Genre
+        </button>
+      </form>
+    </div>
+
+    <div
+      id="div-search-price"
+      class="container"
+      style="margin-bottom: 20px; padding-top: 20px">
+
+      <h3>Search Book By Price</h3>
+      <form action="#">
+        <input
+          type="text"
+          id="input-search-price"
+          class="form-control"
+          style="width: 25%; display: inline" />
+        <button id="btn-search-price" class="btn" type="submit">
+          Search Price
+        </button>
+      </form>
+    </div>
+
+    <div id="div-examined-book" class="container" style="margin-bottom: 20px">
+      <h3>Examined Book</h3>
+      <ul id="list-examined-book" class="list-group">
+        <li class="list-group-item">Book Id: <span></span></li>
+        <li class="list-group-item">Price: <span></span></li>
+        <li class="list-group-item">Genre: <span></span></li>
+      </ul>
+    </div>
+
+    <div class="container" style="margin-bottom: 20px">
+      <h3>List of Similar Books</h3>
+      <table id="table-similar-books" class="table">
+        <thead>
+          <th>BookId</th>
+          <th>Genre</th>
+          <th>Price</th>
+          <th>Examine</th>
+        </thead>
+      </table>
+    </div>
+
+    <div class="container" style="margin-bottom: 20px">
+      <h3>List of All Books</h3>
+      <table id="table-all-books" class="table">
+        <tr>
+          <th>BookId</th>
+          <th>Genre</th>
+          <th>Price</th>
+          <th>Examine</th>
+        </tr>
+      </table>
+    </div>
+    <script src="display_books_promise.js"></script>
+  </body>
+</html>