CodeYourFuture
diff --git a/‎debugging/book-library/index.html‎
Lines changed: 28 additions & 9 deletions b/‎debugging/book-library/index.html‎
Lines changed: 28 additions & 9 deletions
@@ -9,38 +9,57 @@
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
     />
     <style>
+      #toast {
+        position: fixed;
+        bottom: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #333;
+        color: #fff;
+        padding: 0.5rem 1rem;
+        border-radius: 0.25rem;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+      }
+      #toast.show {
+        opacity: 1;
+      }
     </style>
   </head>
   <body>
     <div class="container my-4">
       <h1>My Library</h1>
 
-      <div class="form-group row g-2 align-items-end">
+      <form id="bookForm" class="row g-2 align-items-end">
         <div class="col">
           <label for="title">Title:</label>
           <input type="text" class="form-control" id="title" name="title" required />
         </div>
-
         <div class="col">
           <label for="author">Author:</label>
           <input type="text" class="form-control" id="author" name="author" required />
         </div>
-
         <div class="col">
-          <form id="bookForm" class="row g-2 align-items-end">
           <label for="pages">Pages:</label>
-          <input type="number" class="form-control" id="pages" name="pages" min="1" required />
+          <input
+            type="number"
+            class="form-control"
+            id="pages"
+            name="pages"
+            min="1"
+            step="1"
+            required
+          />
         </div>
-
         <div class="col-auto form-check mb-2">
           <input type="checkbox" class="form-check-input" id="check" name="check" />
           <label class="form-check-label" for="check">Read</label>
         </div>
-
         <div class="col-auto">
-          <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" />
+          <input type="submit" value="Submit" id="submitBtn" class="btn btn-primary" />
         </div>
-      </div>
+      </form>
 
       <table id="display" class="table table-striped mt-4">
         <thead>