general feedback applied to improve html structure

zilinskyte · zilinskyte · commit 385e9d058e91 · 2025-12-12T13:48:52.000Z
diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Library</title>
-    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Book Library</title>
+    <meta charset="utf-8" />
+    <meta 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>
@@ -18,42 +19,48 @@ <h1>My Book 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>
+    <div class="container">
 
-    <div id="demo" class="collapse">
-      <div class="form-group">
-        <label for="title">Title:</label>
-        <input type="text" class="form-control" id="title" name="title" required />
+      <button data-toggle="collapse" data-target="#demo" class="btn btn-info mb-3">
+        Add new book
+      </button>
 
-        <label for="author">Author: </label>
-        <input type="text" class="form-control" id="author" name="author" required />
+      <div id="demo" class="collapse mb-4">
+        <div class="form-group">
 
-        <label for="pages">Pages:</label>
-        <input type="number" class="form-control" id="pages" name="pages" required />
+          <label for="title">Title:</label>
+          <input type="text" class="form-control" id="title" placeholder="Enter book title" required />
 
-        <label class="form-check-label mt-2">
-          <input type="checkbox" class="form-check-input" id="check" /> Read
-        </label>
+          <label for="author" class="mt-2">Author:</label>
+          <input type="text" class="form-control" id="author" placeholder="Enter the author" required />
 
-        <button type="button" class="btn btn-primary mt-3" id="submitBtn">Submit</button>
+          <label for="pages" class="mt-2">Pages:</label>
+          <input type="number" class="form-control" id="pages" placeholder="e.g. 350" required />
+
+          <label class="form-check-label mt-2">
+            <input type="checkbox" class="form-check-input" id="check" /> Read
+          </label>
+
+          <button type="button" class="btn btn-primary mt-3" id="submitBtn">Submit</button>
+        </div>
       </div>
-    </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></tbody>
-    </table>
+      <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></tbody>
+      </table>
+
+    </div>
 
+    <!-- JS File -->
     <script src="script.js"></script>
   </body>
 </html>
