CodeYourFuture · sedazam · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025
diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
@@ -1,96 +1,108 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title> </title>
-    <meta
-      charset="utf-8"
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-    />
-    <link rel="stylesheet" type="text/css" href="style.css" />
-  </head>
-
-  <body>
-    <div class="jumbotron text-center">
-      <h1>Library</h1>
-      <p>Add books to your virtual library</p>
-    </div>
-
-    <button data-toggle="collapse" data-target="#demo" class="btn btn-info">
-      Add new book
-    </button>
-
+<html lang="en">
+<head>
+  <title>My Book Library</title>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="jumbotron text-center">
+        <h1>My Book Library</h1>
+        <p>Add books to your virtual library and track your reading progress</p>
+      </div>
+    </header>
+
+  <main>
+    <div id="alertContainer"></div>
+
+      <div class="text-center mb-3">
+        <button 
+          class="btn btn-info" 
+          data-toggle="collapse" 
+          data-target="#demo">
+          Add New Book
+        </button>
+        <button 
+          class="btn btn-success" 
+          onclick="viewReadBooks()">
+          View Read Books
+        </button>
+        <button 
+          class="btn btn-secondary" 
+          onclick="render()">
+          View All Books
+        </button>
+      </div>
+
     <div id="demo" class="collapse">
-      <div class="form-group">
-        <label for="title">Title:</label>
-        <input
-          type="title"
-          class="form-control"
-          id="title"
-          name="title"
-          required
-        />
-        <label for="author">Author: </label>
-        <input
-          type="author"
-          class="form-control"
-          id="author"
-          name="author"
-          required
-        />
-        <label for="pages">Pages:</label>
-        <input
-          type="number"
-          class="form-control"
-          id="pages"
-          name="pages"
-          required
-        />
-        <label class="form-check-label">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="check"
-            value=""
-          />Read
+  <form id="bookForm">
+    <div class="form-group">
+      <label for="title">Title:</label>
+      <input 
+        type="text" 
+        class="form-control" 
+        id="title" 
+        name="title"
+        placeholder="Enter book title">
+
+      <label for="author">Author:</label>
+      <input 
+        type="text" 
+        class="form-control" 
+        id="author" 
+        name="author"
+        placeholder="Enter author name">
+
+      <label for="pages">Pages:</label>
+      <input 
+        type="number" 
+        class="form-control" 
+        id="pages" 
+        name="pages"
+        placeholder="Enter number of pages">
+
+      <div class="form-check">
+        <input 
+          type="checkbox" 
+          class="form-check-input" 
+          id="check" 
+          name="check">
+        <label class="form-check-label" for="check">
+          I have read this book
         </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
-          onclick="submit();"
-        />
       </div>
+      <button 
+        type="submit" 
+        class="btn btn-primary">
+        Add Book
+      </button>
     </div>
-
-    <table class="table" id="display">
-      <thead class="thead-dark">
-        <tr>
-          <th>Title</th>
-          <th>Author</th>
-          <th>Number of Pages</th>
-          <th>Read</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <script src="script.js"></script>
-  </body>
-</html>
+  </form>
+</div>
+
+      <table class="table table-striped" id="display">
+        <thead class="thead-dark">
+          <tr>
+            <th>Title</th>
+            <th>Author</th>
+            <th>Pages</th>
+            <th>Read Status</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </main>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>