From 69e2ee82582942bd7e38104839b2faa2dcfda573 Mon Sep 17 00:00:00 2001
From: Rainy21 <simonzheng950@gmail.com>
Date: Wed, 25 Feb 2026 14:13:07 -0500
Subject: [PATCH] got the button to open the form

---
 db/my_library.db     | Bin 32768 -> 32768 bytes
 static/css/style.css |   2 ++
 static/js/main.js    |  28 ++++++++++++++++++----------
 templates/main.html  |  17 +++++++++--------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/db/my_library.db b/db/my_library.db
index 9763ca35c38abc5bccbe1f42ec5389f8aaf460c1..e7a6c9b1cf71615bb870f8b366d11bf4fbbf2447 100644
GIT binary patch
delta 76
zcmZo@U}|V!njp=nJW<A(QF&v+LV0ffFAPllcNqBZ@W0$FsBnQ_g`1ICk|{kkuPC*c
cp@)-+S)4I9H6=5ViGhKEhY=!PzsMi}06HZV5&!@I

delta 63
zcmZo@U}|V!njp<6Hc`fzQEX$vLV0cm1_mbnmkj)0_+M@oG`Pzz&dJ0q&X}8;l9|ZF
T#mFqln4X$flv?b)$RGd!7{L(N

diff --git a/static/css/style.css b/static/css/style.css
index 612c423..f9b2476 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -8,6 +8,8 @@
     --rust: #a84832;
     --muted: #7a7060;
     --card-bg: #faf7f2;
+    --book-color: #a84832;
+    --show-color: #7a8c6e;
   }
 
 #body_page{
diff --git a/static/js/main.js b/static/js/main.js
index 72ec880..6643273 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,12 +1,20 @@
-// open log button
-const modal = document.getElementById("#formModal");
-const openbtn = document.getElementById("#openForm");
-const closebtn = document.getElementsByClassName("#closeForm");
+document.addEventListener("DOMContentLoaded", function() {
+    // open log button
+    const modal = document.getElementById("formModal");
+    const openBtns = document.querySelectorAll(".open-form-btn");
+    const closeBtn = document.getElementById("closeFormBtn");
 
-openbtn.addEventListener("click", function() {
-    modal.showModal();
-});
+    if (modal && openBtns.length > 0) {
+        openBtns.forEach(btn => {
+            btn.addEventListener("click", function() {
+                modal.showModal();
+            });
+        });
+    }
 
-closebtn.addEventListener("click", function() {
-    modal.close();
-}) ;
\ No newline at end of file
+    if (closeBtn && modal) {
+        closeBtn.addEventListener("click", function() {
+            modal.close();
+        });
+    }
+});
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index 411b60c..27365a9 100644
--- a/templates/main.html
+++ b/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 id= "openForm">Add New Entry</button>
+              {# 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>