init

anburocky3 · anburocky3 · commit c9bfb66f3fd5 · 2024-07-09T04:15:18.000+05:30
diff --git a/assets/js/data/book.js b/assets/js/data/book.js
@@ -0,0 +1,23 @@
+class Book {
+  constructor(title, author) {
+    this.title = title
+    this.author = author
+    this.read = false
+  }
+
+  getTitle() {
+    return this.title
+  }
+
+  getAuthor() {
+    return this.author
+  }
+
+  isRead() {
+    return this.read
+  }
+
+  markAsRead() {
+    this.read = true
+  }
+}
diff --git a/assets/js/data/library.js b/assets/js/data/library.js
@@ -0,0 +1,23 @@
+class Library {
+  constructor() {
+    this.books = []
+  }
+
+  addBook(book) {
+    this.books.push(book)
+  }
+
+  getBooks() {
+    return this.books
+  }
+
+  bookCount() {
+    return this.books.length
+  }
+
+  removeBook(index) {
+    if (index >= 0 && index < this.books.length) {
+      this.books.splice(index, 1)
+    }
+  }
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,64 @@
+const formEl = document.querySelector('form')
+
+const lib = new Library()
+
+formEl.addEventListener('submit', (e) => {
+  e.preventDefault()
+
+  const bookTitle = document.getElementById('bookTitle').value.trim()
+  const bookAuthor = document.getElementById('bookAuthor').value.trim()
+
+  if (bookTitle && bookAuthor) {
+    const addedBook = new Book(bookTitle, bookAuthor)
+
+    // Add book to Library Class
+    lib.addBook(addedBook)
+
+    renderLibrary()
+
+    // remove the entered book information
+    document.getElementById('bookTitle').value = ''
+    document.getElementById('bookAuthor').value = ''
+  }
+})
+
+function markBookAsRead(index) {
+  lib.getBooks()[index].markAsRead()
+  renderLibrary()
+}
+
+function removeBook(index) {
+  lib.removeBook(index)
+  renderLibrary()
+}
+
+function renderLibrary() {
+  const renderLibEl = document.querySelector('#renderedLibrary')
+
+  const bookCountEl = document.querySelector('#bookCount')
+
+  bookCountEl.textContent = lib.bookCount()
+
+  // resetting previous values
+  renderLibEl.innerHTML = ''
+
+  lib.getBooks().forEach((book, index) => {
+    renderLibEl.innerHTML += `
+   <li class="p-3 bg-orange-100 rounded flex justify-between">
+       <div class="${
+         book.isRead() ? 'line-through' : ''
+       }">${book.getTitle()} by ${book.getAuthor()}</div>
+       <div>
+         <button class="px-2 py-1 bg-green-600 text-sm rounded text-white" onclick="markBookAsRead(
+            ${index}
+         )">
+           Mark as Read
+         </button>
+         <button class="px-2 py-1 bg-red-600 text-sm rounded text-white" onclick="removeBook(${index})">
+           Remove
+         </button>
+       </div>
+     </li>
+  `
+  })
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Library App</title>
+
+    <!-- TailwindCSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style type="text/tailwindcss">
+        @layer components {
+            .input {
+                @apply px-4 py-2 rounded bg-gray-100 outline-none w-full
+            }
+        }
+
+    </style>
+</head>
+
+<body class="bg-indigo-800 p-10">
+    <div class="bg-white p-5 rounded max-w-xl mx-auto">
+        <h4 class="font-semibold text-xl">Book Library</h4>
+
+        <form name="bookForm" class="space-y-3 mt-3">
+            <input type="text" id="bookTitle" placeholder="Book Title" class="input" required>
+            <input type="text" id="bookAuthor" placeholder="Book Author" class="input" required>
+            <button type="submit"
+                class="px-3 py-1 bg-orange-500 rounded uppercase font-semibold text-sm text-white">Save </button>
+        </form>
+    </div>
+
+    <!-- Added books section -->
+    <section class="bg-white p-5 rounded max-w-xl mx-auto mt-5">
+        <h4 class="font-semibold text-xl">Added Books (<span id="bookCount">0</span>)</h4>
+
+        <ul class="mt-3 space-y-2" id="renderedLibrary">
+
+        </ul>
+    </section>
+
+    <script src="./assets/js/data/library.js"></script>
+    <script src="./assets/js/data/book.js"></script>
+    <script src="./assets/js/main.js"></script>
+
+</body>
+
+</html>
