got the button to open the form

static/css/style.css

@@ -8,6 +8,8 @@
     --rust: #a84832;
     --muted: #7a7060;
     --card-bg: #faf7f2;
+    --book-color: #a84832;
+    --show-color: #7a8c6e;
   }
 
 #body_page{

static/js/main.js

@@ -1,12 +1,20 @@
-// open log button
+document.addEventListener("DOMContentLoaded", function() {
-const modal = document.getElementById("#formModal");
+    // open log button
-const openbtn = document.getElementById("#openForm");
+    const modal = document.getElementById("formModal");
-const closebtn = document.getElementsByClassName("#closeForm");
+    const openBtns = document.querySelectorAll(".open-form-btn");
+    const closeBtn = document.getElementById("closeFormBtn");
 
-openbtn.addEventListener("click", function() {
+    if (modal && openBtns.length > 0) {
-    modal.showModal();
+        openBtns.forEach(btn => {
-});
+            btn.addEventListener("click", function() {
+                modal.showModal();
+            });
+        });
+    }
 
-closebtn.addEventListener("click", function() {
+    if (closeBtn && modal) {
-    modal.close();
+        closeBtn.addEventListener("click", function() {
-}) ;
+            modal.close();
+        });
+    }
+});

templates/main.html

@@ -7,14 +7,14 @@
 
     <!-- Bootstrap CSS -->
     <title>Show log</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- CSS -->
     <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/card.css') }}" rel="stylesheet">
 
     <!-- JS -->
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
 
 </head>
 <body>
@@ -50,7 +50,7 @@
           <div id = "seach_bar">
 
             </div>
-          <div id = "openForm">
+          <div id="openFormBtn1" class="open-form-btn">
             + log a book/show
           </div>
         </div>
@@ -79,13 +79,13 @@
             <div class = "header-secton">
               <h1>📚 My Library</h1>
               
-              {% comment %} button {% endcomment %}
+              {# button #}
-              <button id= "openForm">Add New Entry</button>
+              <button id="openFormBtn2" class="open-form-btn">Add New Entry</button>
               
-              {% comment %} this is the form {% endcomment %}
+              {# this is the form #}
               <dialog id="formModal">
 
-                <form action ="/add" method ="dialog" enctype="multipart/form-data">
+                <form action ="/add" method ="POST" enctype="multipart/form-data">
                   <input type="text" name="title" placeholder="Title" required>
                   <select name="type">
                     <option value="Book">Book</option>
@@ -100,6 +100,7 @@
                   </select>
                   <input type="file" name="cover_image">
                   <button type="submit">Add Entry</button>
+                  <button type="button" id="closeFormBtn">Close</button>
                 </form>
 
               </dialog>
@@ -121,6 +122,6 @@
       </div>
     </div>
     <!--Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>